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.

Animation.reverse()Animation インターフェイスのメソッドで、再生方向を逆にします。つまり、アニメーションはその先頭で終わります。再生されていないアニメーションで呼び出されると、アニメーション全体が逆再生されます。一時停止しているアニメーションで呼び出されると、アニメーションは逆に続けられます。

構文

js
reverse()

引数

なし。

返値

なし (undefined)。

アリスの成長/縮小ゲームの例では、ケーキをクリックまたはタップすると、ボトルをクリックまたはタップすると、アリスの成長アニメーション (aliceChange) が逆再生され、アリスが小さくなります。これは aliceChangeAnimation.playbackRate-1 に設定することで行います。

js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.playbackRate = -1;
  aliceChange.play();

  // play the bottle's animation
  drinking.play();
};

But it could also have been done by calling reverse() on aliceChange like so:

js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.reverse();

  // play the bottle's animation
  drinking.play();
};

仕様書

Specification
Web Animations
# dom-animation-reverse

ブラウザーの互換性

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

関連情報