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 esnull
.
Animation.effect
-
Obtiene y establece el
AnimationEffectReadOnly
(en-US) asociado con esta animación. Normalmente, este será un objetoKeyframeEffect
(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