Índice

Transiciones

El módulo CSS Transitions permite realizar movimientos en las páginas HTML. Este módulo se encuentra todavía en estado Working Draft a 19 de noviembre de 2013: http://www.w3.org/TR/css3-transitions/

Las propiedades CSS3 transition aportan movimiento en el diseño de la página, de forma similar a lo que se realiza mediante JavaScript.

Las animaciones se realizan principalmente basándose en cuatro propiedades:

transition-property

Precisa las propiedades CSS que se desea animar, por ejemplo el color (color) y la anchura (width). Estas propiedades se especifican en una lista, separadas por comas.

La palabra clave all (valor por defecto) designa todas las propiedades animadas del elemento.

transition-duration

Precisa la duración de la transición. Se expresa en s (segundos) o ms (milisegundos).

transition-timing-function

Precisa la función de transición que se quiere utilizar:

ease: rápida al principio y más lenta al final.

linear: rapidez constante en toda la duración de la animación.

ease-in: lento al principio y acelerado hacia el final.

ease-out: rápido al principio y desacelerado hacia el final.

ease-in-out: inicio y final más lentos.

transition-delay

Precisa el retardo (o el avance) del inicio de la transición. Se expresa en s (segundos) o ms (milisegundos).

La forma abreviada transition evita tener que definir cada propiedad.

transition: width 2s ease, height 3s linear;

La propiedad transition la reconocen perfectamente los navegadores ...