Animation: pause() メソッド

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.

pause() はウェブアニメーション API のAnimation インターフェイスのメソッドで、アニメーションの再生を一時停止します。

構文

js
animation.pause();

引数

なし。

返値

なし。

例外

InvalidStateError DOMException

アニメーションの currentTime が unresolved であり（おそらくまだ再生を始めていない）、アニメーションの終了時刻が正の値である場合に発生します。

例

Animation.pause() はウェブアニメーション API の国のアリスのGrowing/Shrinking Alice Gameで何度も使用しています。 Element.animate() メソッドで作成したアニメーションはすぐに再生を始めるので、それを避けたい場合は手動で一時停止しなければならないのが主な理由です。

js
// animation of the cupcake slowly getting eaten up
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,
    },
  );

// doesn't actually need to be eaten until a click event, so pause it initially:
nommingCake.pause();

Additionally, when resetting:

js
// An all-purpose function to pause the animations on Alice, the cupcake, and the bottle that reads "drink me."
const stopPlayingAlice = () => {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

// When the user releases the cupcake or the bottle, pause the animations.
cake.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);

仕様書

Specification
Web Animations
# dom-animation-pause

ブラウザーの互換性

BCD tables only load in the browser

関連情報