如何仅使用 JavaScript 暂停和恢复 CSS3 动画？

使用 JavaScript 暂停和恢复 CSS3 动画

问题：

如何暂停和恢复使用 JavaScript 的 CSS3 动画，无需依赖外部库？

解决方案：

1. CSS 动画：

使用 CSS 关键帧定义动画，指定每个的不透明度值和时间

2. 暂停和恢复函数：

创建 JavaScript 函数来处理暂停和恢复动画：

const pauseAnimation = (element) => {
  element.style.animationPlayState = "paused";
};

const resumeAnimation = (element) => {
  element.style.animationPlayState = "running";
};

3. 活动监听器：

向动画元素添加事件监听器以触发暂停和恢复操作：

document.getElementById("pic1").addEventListener("click", () => {
  pauseAnimation(document.getElementById("pic1"));
});

document.getElementById("pic2").addEventListener("click", () => {
  resumeAnimation(document.getElementById("pic2"));
});

附加说明：

• 为了确保动画可以多次暂停，请在添加新的事件监听器之前清除现有的事件监听器
• 或者，使用提供的答案中建议的 CSS 类方法：

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

const pauseAnimation = (element) => {
  element.classList.add("paused");
};

const resumeAnimation = (element) => {
  element.classList.remove("paused");
};

这允许您通过简单地切换此 CSS 来暂停和恢复动画不需要事件监听器的类。

以上是如何仅使用 JavaScript 暂停和恢复 CSS3 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！