Transiciones: propiedades
Las transiciones permiten que los valores de las propiedades CSS varíen con el tiempo, proporcionando animacioanes sencillas. Por ejemplo, si un determinado elemento cambia de color cuando pasamos el ratón por encima, podemos hacer que ese cambio no sea brusco, empleando transiciones es posible desvanecerlo gradualmente de un color al otro, en lugar de un cambio repentino.
De igual forma, podemos animar cualquier transformación (rotación, escalado, etc), consiguiendo unas páginas más dinámicas.
Las transiciones se declaran junto con los estilos normales en un elemento. Siempre que cambien las propiedades de dicho elemento (objetivo), el navegador aplicará la transición.
Método para crear una transición sencilla:
- Declaramos el estado inicial del elemento (p. ej. color de letra negro, fondo blanco).
- Declaramos el estado final, (p. ej. color de letra blanco, fondo negro) en un evento como pasar el ratón por encima del elemento.
- Incluimos las funciones de transición en su estado inicial.
Lista de propiedades para transiciones
(No todas las propiedades se pueden animar con transition, mira la lista completa)
| Propiedad | Descripción |
|---|---|
| transition-porperty |
Lista las propiedades del elemento a las que se debería aplicar la transición. Se incluyen propiedades de fondo, borde, modelo de caja. Se pueden incluir cualquier cantidad de propiedades CSS en la declaración transition-porperty separadas por coma. También podemos usar la palabra clave all para indicar que cada propiedad que se soporte debería estar animada. transition-porperty: transform; |
| transition-duration |
Establece cuanto durará la transición. Podemos especificar esto en segundos (s) o en milisegundos (ms). transition-duration: 0.2s; |
| transition-timing-function |
Nos permite controlar el ritmo de la transición con mayor detalle. Podemos hacer que la transición empiece rápido y termine más lenta, o viceversa; avance siempre igual o con variaciones distintas. Para especificar todo esto utilizamos: ease,ease-in,ease-out,ease-in-out,cubic-bezier,linear. transition-timing-function: ease-out; |
| transition-delay |
Es posible incorporar un retraso antes de que empiece la animación. Normalmente, una transición empieza de inmediato, por lo que el predeterminado es 0. Podemos incluir un número de milisegundos (ms) o segundos (s) para retrasarla. transition-delay: 200ms; |
| transition |
transition: [transition-property] [transition-duration]
[transition-timing-function] [transition-delay];
Es una propiedad abreviada (shorthand). Hay que tener en cuenta que el orden es importante dentro de los elementos de esta propiedad: el primer valor que se puede analizar como un tiempo se asigna a la duración de transición y el segundo valor que se puede analizar como un tiempo se asigna al retardo de transición. .ejemplo {
transition: transition: all 0.5s ease-in;
}
|
Lo normal es utilizar la propiedad shorthand transition
Soporte de CSS3 Transitions para los distintos navegadores en Caniuse.