Concepto
La propiedad CSS para definir una animación es animation. Las animaciones, a diferencia de las transiciones, permiten cambiar los valores de las propiedades de estilo entre varios puntos de cambio denominados fotogramas (o keyframes), partiendo de un inicio hasta llegar a su final.
Las animaciones no requieren definir un evento desencadenante de parte del usuario para ejecutar el efecto, como se lo hacía en las transiciones. No obstante, si se lo requiere, se podría definir el evento desencadenante.
Aplicar una animación consiste en estos simples pasos:
Paso 1: Definir la Animación
Usando la instrucción @keyframe, define el nombre de la animación (ej., "mi_animacion") y luego indica la secuencia de pasos que tendrá la animación. Ejemplo:
@keyframes animacion-color {
from { background: red; }
to { background: green; }
}
La secuencia de pasos pueden ser definida de dos maneras.
- La primera, definiendo el fotograma origen con la instrucción from y el fotograma final con to (como se muestra en el ejemplo).
- La segunda implica pensar en la secuencia de pasos como si fuere una escala porcentual, donde 0% es el fotograma inicial y 100% es el fotograma final, por lo que para definir un fotograma entre el inicio y el fin, basta con definir un porcentaje entre 0% y 100%.
Paso 2: Aplicar animación al elemento HTML
Dentro de la regla de estilo del elemento HTML, usa la propiedad animation indicando el nombre de la animación definida en el paso 1 y configura ritmo, dirección y duración de la animación. En el ejemplo, la línea 5 indica el nombre de animación a ejecutar mediante la propiedad animation :y "5s" indica la duración de la animación.
.element {
width: 100px;
height: 100px;
background: grey;
animation: animacion-color 5s;
}
@keyframes animacion-color {. . .} /* Paso 1 */Para configurar estos últimos detalles, se debe hacer uso de las siguientes sup-propiedades:
| Sub-propiedad | Descripción |
| animation-name | Indica el nombre de la animación a ejecutar |
| animation-duration | Duración de la animación (en segundos) |
| animation-delay | Tiempo (en segundos) que tarda la animación en ejecutarse |
| animation-direction | Orden de ejecución de los fotogramas de la animación. Puede ser en orden normal o en reversa, por ejemplo. |
| animation-iteration-count | Número de veces que se ejecutará la animación (la secuencia de pasos) |
| animation-timing-function | Velocidad de la animación, especificada mediante la curva bezier. |
