ItsME ItsME - 2 months ago 6
CSS Question

Transition with absolute positioning

Please consider following example.
Div which is the shape of ball does move but its sudden movement rather I want it to transition diagonally across the page to the bottom right corner. Why isn't that happening? What did I miss?



.one {
background: green;
height: 100px;
width: 100px;
position: absolute;
border-radius: 100px;
transition: all 1s ease;
}
.one:hover {
background: red;
bottom: 0px;
right: 0px;
}

<div class="one"></div>




Answer

For transition to happen, you need values on both the parent and hover element selectior.

Here i just added proper values to both the selectors , and by subtracting their heights easily.

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
  top: 0%;
  left: 0%;
}
.one:hover {
  background: red;
  top: calc(100% - 100px);
  left: calc(100% - 100px);
}
<div class="one"></div>

These will work with most modern browsers . Also you can use pollyfill to make it work with backward browsers

For transition to happen, you need values on both the selectors.

Here in your case, the parent selector did not have any values of bottom or of left, but if you look at my code, both the parent and hover selectors have top and left value.

We just need to specify value so browser knows that where to start from

Comments