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.
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.
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). |
Recomendaciones para que tus animaciones sean efectivas además de atractivas:
✨ 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.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.