このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Animation: pause() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。

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

構文

js
animation.pause();

引数

なし。

返値

なし。

例外

InvalidStateError DOMException

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

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);

仕様書

仕様書
Web Animations
# dom-animation-pause

ブラウザーの互換性

関連情報