Transizione CSS tra sinistra -> destra e in alto -> posizioni in basso

Question

È possibile utilizzare le transizioni CSS per animare qualcosa tra una posizione impostata come left: 0px a right: 0px in modo che attraversi tutto lo schermo? Ho bisogno di realizzare la stessa cosa da cima a fondo. Sono bloccato calcolando la larghezza dello schermo/dimensione dell'oggetto?

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

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

e poi io uso di jQuery .addClass

Answer 1

Se si conosce la larghezza/altezza dell'elemento animato è possibile animare la posizione (in alto, in basso, a sinistra, a destra) e quindi sottrarre il margine corrispondente.

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

E poi animare a seconda della posizione ...

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

Questa implementazione sarebbe probabilmente più agevole con transform: translate(x,y) ma lo terrò come questo in modo che sia più comprensibile.

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

Answer 2

questo ha funzionato per me su Chromium. La percentuale di traduzione è in riferimento alla dimensione del riquadro di delimitazione dell'elemento a cui è applicata, in modo da ottenere perfettamente l'elemento sul bordo inferiore destro senza dover cambiare la proprietà utilizzata per specificare la sua posizione.

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

Answer 3

Nei browser più moderni (tra cui IE 10+) è ora possibile utilizzare calc():

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