Animation: play() メソッド

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.

play()ウェブアニメーション APIAnimation インターフェイスのメソッドで、アニメーションの再生を開始または再開します。アニメーションが完了した場合、play() を呼び出すとアニメーションを再開し、最初から再生します。

構文

js
play()

引数

なし。

返値

なし (undefined)。

アリスの成長/縮小ゲームの例では、ケーキをクリックまたはタップすると、アリスの成長アニメーション (aliceChange) が再生され、ケーキのアニメーションが発生すると同時に、アリスが大きくなります。 2 つの Animation.play()、 1 つの EventListener です。

js
// The cake has its own animation:
const nommingCake = document
  .getElementById("eat-me_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

// Pause the cake's animation so it doesn't play immediately.
nommingCake.pause();

// This function will play when ever a user clicks or taps
const growAlice = () => {
  // Play Alice's animation.
  aliceChange.play();

  // Play the cake's animation.
  nommingCake.play();
};

// When a user holds their mouse down or taps, call growAlice to make all the animations play.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

仕様書

Specification
Web Animations
# dom-animation-play

ブラウザーの互換性

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
play

Legend

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

Full support
Full support

関連情報