CSS transition between left -> right and top -> bottom positions

Question

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 scre

Answer 1

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.

demo: http://jsfiddle.net/nKtC6/