Animation
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