Animation.reverse()
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde marzo de 2020.
El método Animation.reverse() de la interfaz Animation Interface invierte la dirección de reproducción, lo que significa que la animación termina al principio. Si se llama en una animación sin reproducir, toda la animación se reproduce al revés. Si se llama en una animación pausada, continúa a la inversa.
Sintaxis
animation.reverse();
Parámetros
Ningun.
Valor devuelto
undefined
Ejemplos
En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia(aliceChange) sea reproducida al revés, lo que la hace más pequeña. Esto se hace estableciendo el Animation.playbackRate de aliceChange en -1 de esta forma:
var shrinkAlice = function () {
// reproduce la animación de Alicia al revés.
aliceChange.playbackRate = -1;
aliceChange.play();
// reproduce la animación de la botella.
drinking.play();
};
Pero también se podría haber hecho lamando a reverse() en aliceChange así:
var shrinkAlice = function () {
// reproduce la animación de Alicia al revés.
aliceChange.reverse();
// reproduce la animación de la botella.
drinking.play();
};
Especificaciones
| Especificación |
|---|
| Web Animations # dom-animation-reverse |
Compatibilidad con navegadores
Ver también
- Web Animations API
Animationpara otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.Animation.pause()para pausar una animación.Animation.play()para reproducir una animación hacia adelante.