Hacer una animación en CSS implica tres partes clave: definir la animación, asignar la animación a un elemento y personalizar la animación.
1. Definir la animación: Esto se hace usando la regla @keyframes. Las animaciones se construyen como una secuencia de cambios de estado.
Ejemplo:
```css
@keyframes nombre-de-animacion {
0% {
background-color: red;
}
100% {
background-color: yellow;
}
}
```
En este ejemplo, la animación va a cambiar gradualmente el color de fondo de un elemento desde rojo al 0% del tiempo de animación hasta amarillo al 100% del tiempo de animación.
2. Asignar la animación a un elemento: Una vez definida la “animación”, puedes asignarla a un elemento utilizando la propiedad “animation-name”, y también se define la duración con “animation-duration”.
Ejemplo:
```css
div {
animation-name: nombre-de-animacion;
animation-duration: 4s;
}
```
En este caso, la animación se debe aplicar a cualquier div del HTML y su duración será de 4 segundos.
3. Personalizar la animación: Puedes tener un control más detallado sobre tus animaciones ajustando otras propiedades de animación como:
- animation-delay: establece un retraso para el inicio de una animación
- animation-iteration-count: define cuántas veces se debe ejecutar una animación
- animation-direction: especifica si una animación debe jugarse hacia adelante, hacia atrás o en ciclos alternos
- animation-fill-mode: especifica cómo un elemento CSS debería aparecer antes o después de la animación
- animation-timing-function: establece la rapidez con la que se completan las intermedias de una animación
Ejemplo:
```css
div {
animation-name: nombre-de-animacion;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
}
```
Por último cabe destacar que puedes resumir todos los pasos en una sola línea de código.
```css
div {
animation: nombre-de-animacion 4s 2s infinite alternate both ease-in-out;
}
```
En este ejemplo, la animación se aplica a los div, inicia después de un retraso de 2 segundos, se ejecuta indefinidamente (infinite), alterna entre jugar hacia adelante y hacia atrás, sus estilos se aplican antes y después de su ejecución y su velocidad es acelerada al inicio y al final.
