La animación en CSS3 se puede crear utilizando el marco de reglas de animación que puede controlar el flujo de animación y varias propiedades de estilo para el elemento de destino. Aquí hay un ejemplo simple de cómo se puede lograr:
HTML:
```
CSS:
```
.animation-example {
width: 100px;
height: 100px;
background-color: red;
animation-name: animatediv;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes animatediv {
from {background-color: red;}
to {background-color: yellow;}
}
```
En este ejemplo, se anima el color de fondo de un div desde rojo hasta amarillo. La animación durará 4 segundos y se repetirá indefinidamente.
Algunos puntos cruciales a tener en cuenta con las animaciones de CSS son:
- animation-name: Especifica el nombre de la animación del @keyframes.
- animation-duration: Especifica cuánto tiempo tomará completar una iteración de la animación.
- animation-timing-function: Especifica la velocidad de la animación en diferentes puntos dentro del ciclo de animación.
- animation-delay: Especifica cuánto tiempo esperar antes de comenzar la animación.
- animation-iteration-count: Especifica cuántas veces se debe repetir la animación.
- animation-direction: Especifica si la animación debe reproducirse hacia adelante, hacia atrás o de ida y vuelta.
- animation-fill-mode: Especifica cómo se deben aplicar los estilos al elemento animado antes o después de hacer la animación.
- animation-play-state: Especifica si la animación está en ejecución o pausada.
Además del CSS, JavaScript también se puede usar junto con la API de animaciones de CSS para controlar las animaciones de forma programática.
