La regla @keyframes en CSS se utiliza para crear animaciones. Define el comportamiento de la animación en diferentes momentos o “frames” del tiempo de duración de la animación.
Por ejemplo, puedes definir que quieras cambiar el color de fondo de un elemento de rojo a azul en un período de 5 segundos. Los puntos clave en esta animación podrían ser cuando el fondo es completamente rojo (en 0 segundos, o 0% de la animación), cuando el fondo es morado (en 2.5 segundos, o 50% de la animación) y cuando el fondo es completamente azul (en 5 segundos, o 100% de la animación).
Aquí es donde interviene keyframes. Puedes usar esta regla para definir precisamente esos puntos clave en tu animación. Aquí está el ejemplo anterior escrito en CSS usando keyframes:
```css
@keyframes cambiaColor {
0% {background-color: red;}
50% {background-color: purple;}
100% {background-color: blue;}
}
```
Posteriormente, puede utilizar la regla de animación para enlazar la animación definida con un elemento específico:
```css
#miElemento {
animation-name: cambiaColor;
animation-duration: 5s;
}
```
Eso indica que la animación llamada “cambiaColor”, que se definió usando la regla @keyframes, se aplicará al elemento con el id “miElemento” y durará 5 segundos.
