Is it possible to use CSS transitions to animate something between a position set as left: 0px
to right: 0px
so it goes all the way across the screen? I need to accomplish the same thing with top to bottom. Am I stuck calculating the screen width / object-size?
#nav {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
-webkit-transition: all 0.5s ease-out;
}
.moveto {
top: 0px;
right: 0px;
}
and then I use jQuery's .addClass
If you know the width/height of the animated element you can animate the position (top, bottom, left, right) and then substract the corresponding margin.
​.animate {
height: 100px;
width: 100px;
background-color: #c00;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
left: 0; /*or bottom, top, right*/
}
And then animate depending on the position...
.animate.move {
left: 100%; /*or bottom, top, right*/
margin-left: -100px; /*or bottom, top, right */
}
This implementation would probably be smoother with transform: translate(x,y)
but I'll keep it like this so it's more understandable.