Animation

Baseline 2022

Newly available

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

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.

Especificaciones

Specification
Web Animations
# the-animation-interface

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también