Animation

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La interfaz Animation de la  Web Animations API 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, está inactivo, o no se ha reproducido todavía, su valor es null.
Animation.effect
Obtiene y establece el AnimationEffectReadOnly asociado con esta animación. Normalmente, este será un objeto KeyframeEffect.
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 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 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()
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 para crear una experiencia complementaria para los usuarios que han expresado su preferencia por experiencias no animadas.

Especificaciones

Especificación Estado Comentario
Web Animations
La definición de 'Animation' en esta especificación.
Working Draft Definición inicial

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
Animation
Experimental
Chrome Soporte completo 44
Soporte completo 44
Sin soporte 39 — 44
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : AnimationPlayer
Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 44
Soporte completo 44
Sin soporte 39 — 44
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : AnimationPlayer
Chrome Android Soporte completo 44
Soporte completo 44
Sin soporte 39 — 44
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : AnimationPlayer
Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
Animation() constructor
Experimental
Chrome Soporte completo 61Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android Soporte completo 61Chrome Android Soporte completo 61Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Sin soporte NoSamsung Internet Android Sin soporte No
cancel
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
currentTime
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
effect
Experimental
Chrome Sin soporte NoEdge ? Firefox Soporte completo 63
Soporte completo 63
Soporte completo 48
Notas Deshabilitado
Notas This property is supported in Firefox 48 but is read-only. It became writable in Firefox 51.
Deshabilitado From version 48: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 63
Soporte completo 63
Soporte completo 48
Notas Deshabilitado
Notas This property is supported in Firefox 48 but is read-only. It became writable in Firefox 51.
Deshabilitado From version 48: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
finish
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
finished
Experimental
Chrome Sin soporte NoEdge ? Firefox Soporte completo 63
Soporte completo 63
Soporte completo 46
Deshabilitado
Deshabilitado From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 63
Soporte completo 63
Soporte completo 46
Deshabilitado
Deshabilitado From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
id
Experimental
Chrome Soporte completo 50Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 37Safari Sin soporte NoWebView Android Soporte completo 50Chrome Android Soporte completo 50Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 37Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 5.0
oncancel
Experimental
Chrome Soporte completo 50Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 37Safari Sin soporte NoWebView Android Soporte completo 50Chrome Android Soporte completo 50Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 37Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 5.0
onfinish
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
pause
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
pending
Experimental
Chrome Sin soporte NoEdge ? Firefox Soporte completo 59
Notas
Soporte completo 59
Notas
Notas Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 59
Notas
Soporte completo 59
Notas
Notas Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
play
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
playbackRate
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
playState
Experimental
Chrome Soporte completo 39
Notas
Soporte completo 39
Notas
Notas Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Edge ? Firefox Soporte completo 48
Notas
Soporte completo 48
Notas
Notas Prior to Firefox 59, this property returned pending for Animations with incomplete asynchronous operations but as of Firefox 59 this is indicated by the separate Animation.pending property. This reflects recent changes to the specification.
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26
Notas
Soporte completo 26
Notas
Notas Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Safari Sin soporte NoWebView Android Soporte completo 39
Notas
Soporte completo 39
Notas
Notas Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Chrome Android Soporte completo 39
Notas
Soporte completo 39
Notas
Notas Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Firefox Android Soporte completo 48
Notas
Soporte completo 48
Notas
Notas Prior to Firefox 59, this property returned pending for Animations with incomplete asynchronous operations but as of Firefox 59 this is indicated by the separate Animation.pending property. This reflects recent changes to the specification.
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26
Notas
Soporte completo 26
Notas
Notas Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
ready
Experimental
Chrome Sin soporte NoEdge ? Firefox Soporte completo 63
Soporte completo 63
Soporte completo 46
Deshabilitado
Deshabilitado From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 63
Soporte completo 63
Soporte completo 46
Deshabilitado
Deshabilitado From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
reverse
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
startTime
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
timeline
Experimental
Chrome Sin soporte NoEdge ? Firefox Soporte completo 63
Deshabilitado
Soporte completo 63
Deshabilitado
Deshabilitado From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte 48 — 63
Notas Deshabilitado
Notas This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49.
Deshabilitado From version 48 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 63
Deshabilitado
Soporte completo 63
Deshabilitado
Deshabilitado From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte 48 — 63
Notas Deshabilitado
Notas This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49.
Deshabilitado From version 48 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
updatePlaybackRate
Experimental
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 60IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 60Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Usa un nombre no estandar.
Usa un nombre no estandar.

Ver también