Animaciones CSS

El módulo Animaciones CSS le permite animar los valores de las propiedades CSS, como la posición del fondo y transformaciones, a lo largo del tiempo mediante el uso de fotogramas clave. Cada fotograma clave describe cómo debe renderizarse el elemento animado en un momento dado durante la secuencia de animación. Puede usar las propiedades en el módulo de animaciones para controlar la duración, el número de repeticiones, el inicio retrasado y otros aspectos de una animación.

Animaciones en acción

Para ver la animación en el cuadro a continuación, haga clic en la casilla de verificación 'Reproducir la animación' o pase el cursor sobre el cuadro. Cuando la animación está activa, la nube en la parte superior cambia de forma, caen copos de nieve y el nivel de nieve en la parte inferior aumenta. Para pausar la animación, desmarque la casilla de verificación o aleje el cursor de la casilla.

Esta animación de muestra usa animation-iteration-count para hacer que los copos caigan repetidamente, animation-direction para hacer que la nube se mueva de un lado a otro, animation-fill-mode para aumentar el nivel de nieve en respuesta al movimiento de la nube y animation-play-state para pausar la animación.

Para ver el código de esta animación, vea la fuente en GitHub.

Referencia

Propiedades

Reglas arroba

Eventos

Todas las animaciones, incluso aquellas con 0 segundos de duración, lanzan eventos de animación.

Interfaces

Guías

Usando animaciones CSS

Tutorial paso a paso sobre cómo crear animaciones usando CSS. Este artículo describe las propiedades CSS y las reglas arroba relacionadas con la animación y cómo interactúan entre sí.

Consejos y trucos de animación CSS

Consejos y trucos para ayudarlo a aprovechar al máximo las animaciones CSS.

Conceptos relacionados

Especificaciones

Specification
CSS Animations Level 2
CSS Animations Level 1

Véase también