Animaciones CSS

Las animaciones CSS permiten que un elemento cambie gradualmente de aspecto, como color, tamaño, posición u opacidad. Son clave para crear sitios web modernos y dinámicos.

Animación simple con @keyframes

La regla @keyframes define los pasos de la animación. Podemos especificar cómo cambia el estado del elemento entre el inicio y el final.

En este ejemplo, el color de fondo de un cuadro cambia de rojo a amarillo y vuelve, en bucle infinito.

Propiedades de animación

Las animaciones se controlan mediante varias subpropiedades, como el nombre, la duración, la función de velocidad, el retraso y el número de repeticiones.

Propiedad	Descripción
animation-name	Especifica qué animación @keyframes usará el elemento.
animation-duration	La duración de la animación en segundos o milisegundos.
animation-timing-function	La curva de velocidad de la animación (ej. ease, linear, ease-in, ease-out).
animation-delay	Tiempo de retraso antes de iniciar la animación.
animation-iteration-count	Cuántas veces debe repetirse la animación (puede ser infinito).
animation-direction	La dirección de la animación (ej. normal, reverse, alternate).

Consejos para animaciones CSS

Recomendaciones para que tus animaciones sean efectivas además de atractivas:

Usa animaciones con moderación: demasiado movimiento puede ser molesto.
Anima propiedades que sean amigables con el rendimiento (ej. transform, opacity), no las que afectan el layout (ej. width, height).
Combina animaciones y transiciones para lograr efectos más naturales.