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.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
