Sintaxis de @keyframes y propiedad animation

Las animaciones CSS permiten cambiar propiedades en varios pasos a lo largo del tiempo mediante @keyframes. A diferencia de las transiciones, las animaciones comienzan automáticamente o al añadir una clase, y admiten secuencias complejas.

Defina los pasos de la animación mediante porcentajes (del 0 % al 100 %) o las palabras clave from/to:

Aplique una animación a un elemento mediante la abreviatura animation o sus subpropiedades:

Hace referencia a la regla @keyframes por su nombre:

Establece cuánto dura un ciclo de la animación:

Use fotogramas clave porcentuales para crear animaciones complejas de varios pasos:

Cada paso de los fotogramas clave puede animar varias propiedades simultáneamente:

La función de aceleración se puede establecer en cada paso de los fotogramas clave para controlar la transición entre puntos intermedios individuales, en lugar de aplicarla a toda la animación.

Aplique varias animaciones a un elemento mediante valores separados por comas:

Pause y reanude las animaciones dinámicamente:

Elija según el caso:

• Transición: dos estados, activada por un cambio de estado y sencilla
• Animación: varios pasos, inicio automático, repetición y mayor control

¿Qué palabra clave de @keyframes representa el estado inicial de la animación?

Defina los pasos de una animación con @keyframes mediante from/to o puntos intermedios porcentuales. Aplíquela con la abreviatura animation, especificando el nombre, la duración, la función de aceleración y el modo de relleno. Separe varias animaciones con comas. Use transiciones para cambios sencillos entre dos estados y animaciones para secuencias complejas.