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
- Propiedad CSS
will-change(en-US) - Tipo de dato
<easing-function>(en-US) - Consulta de medios
prefers-reduced-motion(en-US) - Término del glosario Bezier curve (en-US)
Especificaciones
| Specification |
|---|
| CSS Animations Level 2 |
| CSS Animations Level 1 |
Véase también
- Animaciones CSS basadas en desplazamiento (en-US)
- Propiedades en el módulo CSS transitions para activar animaciones en función de las acciones del usuario
- El elemento HTML
<canvas>junto con la API de canvas y la API de WebGL para dibujar gráficos y animaciones - La interfaz
SVGAnimationElement(en-US) para todas las interfaces de elementos relacionados con la animación, incluidasSVGAnimateElement(en-US),SVGAnimateElement(en-US),SVGAnimateColorElement(en-US),SVGAnimateMotionElement(en-US) ySVGAnimateTransformElement(en-US)