Animation
=========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
La interfaz `Animation` de la Web Animations API (en-US) representa un reproductor de animación y proporciona controles de reproducción y una línea de tiempo para un nodo o una fuente de animación.

Constructor
-----------

`Animation()`

Crea una nueva instancia de objeto `Animation`.

Propiedades
-----------

`Animation.currentTime`

El valor del tiempo de la animación actual en milisegundos , ya sea en ejecución o en pausa. Si la animación carece de `timeline` (en-US), está inactivo, o no se ha reproducido todavía, su valor es `null`.


`Animation.effect`

Obtiene y establece el `AnimationEffectReadOnly` (en-US) asociado con esta animación. Normalmente, este será un objeto `KeyframeEffect` (en-US).

`Animation.finished` Read only 

Devuelve la Promesa actual terminada para esta animación.


`Animation.id`

Obtiene y establece la `String` usada para identificar la animación.

`Animation.playState` Read only 

Devuelve un valor enumerado que describe el estado de la reproducción de una animación.


`Animation.playbackRate`

Obtiene o establece la velocidad de reproducción de la animación.


`Animation.ready` Read only 

Devuelve la Promesa actual lista para esta animación.


`Animation.startTime`

Obiene o establece la hora programada en la que debe comenzar la reproducción de la animación.


`Animation.timeline`

Obtiene o establece el `timeline` (en-US) asociado con esta animación.

### Manejadores de eventos

`Animation.oncancel`

Obtiene y establece en manejador de eventos para el evento `cancel`.

`Animation.onfinish`

Obtiene y establece en manejador de eventos para el evento `finish` .

Métodos
-------

`Animation.cancel()`

Borra todos los `keyframeEffects` (en-US) causados por la animación y aborta su reproducción.


`Animation.finish()`

Busca cualquier final de una animación, dependiendo de si la animación se está reproduciendo o invirtiendo.


`Animation.pause()`

Pone la reproducción en pausa.


`Animation.play()`

Busca el final de una animación, dependiendo de si la animación se está reproduciendo o si se está invirtiendo.


`Animation.reverse()`

Invierte la dirección de reproducción, deteniéndose al comienzo de la animación. Si la animación finaliza o no se activa, volverá a reproducirse desde el final al principio.


`Animation.updatePlaybackRate()` (en-US)

Establece la velocidad de la animación después de sincronizar por primera vez su posición de reproducción.

Problemas de accesibilidad
--------------------------

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

Considera ofrecer un mecanismo para pausar o deshabilitar las animaciones, así como utilizar Reduced Motion Media Query (en-US) para crear una experiencia complementaria para los usuarios que han expresado su preferencia por experiencias no animadas.

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN Understanding WCAG, Guideline 2.2 explanations (en-US)
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
Especificaciones
----------------

| Specification |
| --- |
| Web Animations # the-animation-interface |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* API de Animaciones Web (en-US)