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

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/

Answer 2

This worked for me on Chromium. The % for translate is in reference to the size of the bounding box of the element it is applied to so it perfectly gets the element to the lower right edge while not having to switch which property is used to specify it's location.

topleft {
  top: 0%;
  left: 0%;
}
bottomright {
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%,-100%);
}

Answer 3

In more modern browsers (including IE 10+) you can now use calc():

.moveto {
  top: 0px;
  left: calc(100% - 50px);
}