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) が逆再生され、アリスが小さくなります。これは aliceChange の Animation.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

ブラウザーの互換性

BCD tables only load in the browser

関連情報