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

* `animation` abreviatura
* `animation-composition` (en-US)
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
* `animation-timeline` (en-US)
### Reglas arroba

* `@keyframes`
### Eventos

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

* `animationstart` (en-US)
* `animationend`
* `animationcancel` (en-US)
* `animationiteration` (en-US)
### Interfaces

* API de animaciones web (en-US)
* `AnimationEvent`
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
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, incluidas `SVGAnimateElement` (en-US), `SVGAnimateElement` (en-US), `SVGAnimateColorElement` (en-US), `SVGAnimateMotionElement` (en-US) y `SVGAnimateTransformElement` (en-US)