动画: pause() 方法

基线 广泛可用

此功能已成熟，可在许多设备和浏览器版本上运行。它从 2020 年 3 月.

报告反馈

语法

pause() 是 Web 动画 API 中的 Animation 接口的方法，它可以暂停动画的播放。
animation.pause();

js

参数

无。

参数

返回值

异常

InvalidStateError DOMException

示例

如果动画的 currentTime 为 unresolved（可能尚未开始播放），并且动画的结束时间为正无穷大，则会抛出此异常。

pause() 是 Web 动画 API 中的 Animation 接口的方法，它可以暂停动画的播放。
// 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();

在 Alice 在 Web 动画 API 之国 生长/缩小爱丽丝游戏 中，Animation.pause() 被多次使用，主要是因为使用 Element.animate() 方法创建的动画会立即开始播放，如果你想避免这种情况，则必须手动暂停。

pause() 是 Web 动画 API 中的 Animation 接口的方法，它可以暂停动画的播放。
// 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 动画

浏览器兼容性

dom-animation-pause

另请参阅