Transition with absolute positioning - html

Question

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 1

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

Answer 2

you can try by giving these to hover state
top:100%;
left:100%;
margin-top:-100px;
margin-left:-100px;
check the codepen here http://codepen.io/raomarif/pen/RGNpNm?editors=1100

Answer 3

Just to give you an more complex example which does the transition on hover but continues it no matter where the mouse is + is reversible.
var toggleClass = true;
var totalSeconds = 0;
var transitionTime = 1000; /* In milliseconds */
function mouseOver(element) {
if (totalSeconds === 0) {
var myTimer = setInterval(function() {
countTime()
}, 100);
}
function countTime() {
++totalSeconds;
console.log(totalSeconds);
if (totalSeconds >= (transitionTime / 100)) {
stopTime();
totalSeconds = 0;
toggleClass = true;
} else {
toggleClass = false;
}
}
if (toggleClass) {
element.classList.toggle('moved');
}
function stopTime() {
clearInterval(myTimer);
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.one {
position: absolute;
background: green;
height: 100px;
width: 100px;
top: 0;
left: 0;
border-radius: 100px;
transition: all 1000ms ease-in-out;
}
.one.moved {
top: 100%;
left: 100%;
margin-top: -100px;
margin-left: -100px;
transition: all 1000ms ease-in-out;
}
<div class="one" onmouseover="mouseOver(this)"></div>
This example requires Javascript. There's some checks to see if the transition is complete so hovering the circle again won't reverse the transition etc.
JSFiddle to play around with