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...
Si desea saber más, le proponemos el siguiente libro:
Versión impresa
Versión online
En ilimitado con la suscripción ENI
En la tienda oficial de ENI
Condiciones generales de usoCopyright - © Éditions ENI ||Política de protección de datos del grupo ENI