Concepto
La propiedad animation es utilizada para definir una animación en CSS. Las animaciones, a diferencia de las transiciones, permiten cambiar los valores iniciales de las propiedades de estilo, a valores finales de las propiedades. La magia está en que este "cambio" se puede especificar mediante varios puntos denominados fotogramas (o keyframes).
A diferencia de como las transiciones, las animaciones no requieren definir un evento desencadenante de parte del usuario para ejecutar el efecto. 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, definir el nombre de la animación (ej., "mi_animacion") y luego indicar 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. |
