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>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