Transición CSS entre izquierda -> derecha y arriba -> posiciones inferiores

Question

¿Es posible usar transiciones CSS para animar algo entre una posición establecida como left: 0px a right: 0px para que abarque toda la pantalla? Necesito lograr lo mismo de arriba a abajo. ¿Estoy atascado calculando el ancho de la pantalla/tamaño del objeto?

#nav { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 50px; 
    height: 50px; 
    -webkit-transition: all 0.5s ease-out; 
} 

.moveto { 
    top: 0px; 
    right: 0px; 
} 

y luego uso de jQuery .addClass

Answer 1

Si conoce la anchura/altura del elemento animado puede animar la posición (arriba, abajo, izquierda, derecha) y luego restar el margen correspondiente.

​.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*/ 
} 

Y luego animar dependiendo de la posición ...

.animate.move { 
    left: 100%; /*or bottom, top, right*/ 
    margin-left: -100px; /*or bottom, top, right */ 
} 

Esta implementación sería probablemente más suave con transform: translate(x,y) pero voy a mantenerlo como esto por lo que es más comprensible.

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

Answer 2

Esto funcionó para mí en el cromo. El% para traducir se refiere al tamaño del cuadro delimitador del elemento al que se aplica, por lo que lleva perfectamente el elemento al borde inferior derecho sin tener que cambiar qué propiedad se utiliza para especificar su ubicación.

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

Answer 3

En los navegadores más modernos (incluyendo IE 10+) ahora se puede utilizar calc():

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