Animation.reverse()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 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

js
animation.reverse();

Parámetros

Ningun.

Valor devuelto

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:

js
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í:

js
var shrinkAlice = function () {
  // reproduce la animación de Alicia al revés.
  aliceChange.reverse();

  // reproduce la animación de la botella.
  drinking.play();
};

Especificaciones

Specification
Web Animations
# dom-animation-reverse

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver también