Html 尝试通过添加已暂停的类来暂停css动画

所以我看到有人推荐这种方法作为暂停css动画的最佳方式。只需在元素中添加或删除动画播放状态设置为暂停的类即可。以下是我的尝试：

@关键帧运行{
从{
背景位置：0px；
}
到{
背景位置：-1536px；
}
}
#动画{
宽度：256px；
高度：256px；
位置：绝对位置；
背景图像：url（'https://i.stack.imgur.com/aH5zB.jpg');
动画：运行。5步（6）无限；
}
.停顿{
动画播放状态：暂停；
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
}

这是因为

#animation

是一个id选择器，它比类选择器（

.paused

）更具体，因此后者不会覆盖第一个

将

.paused

替换为

#动画。paused

将正常工作

函数toggleAnimationPlayState（）{
document.querySelector（'#animation'）.classList.toggle（'paused'））
}

@关键帧运行{
从{
背景位置：0px；
}
到{
背景位置：-1536px；
}
}
#动画{
宽度：256px；
高度：256px；
位置：绝对位置；
背景图像：url（'https://i.stack.imgur.com/aH5zB.jpg');
动画：运行。5步（6）无限；
}
#动画。暂停{
动画播放状态：暂停；
}

切换暂停的类

这是因为

#animation

是一个id选择器，它比类选择器（

.paused

）更具体，因此后者不会覆盖第一个

将

.paused

替换为

#动画。paused

将正常工作

函数toggleAnimationPlayState（）{
document.querySelector（'#animation'）.classList.toggle（'paused'））
}

@关键帧运行{
从{
背景位置：0px；
}
到{
背景位置：-1536px；
}
}
#动画{
宽度：256px；
高度：256px；
位置：绝对位置；
背景图像：url（'https://i.stack.imgur.com/aH5zB.jpg');
动画：运行。5步（6）无限；
}
#动画。暂停{
动画播放状态：暂停；
}

切换暂停的类

您无需JS即可达到预期效果。我会尝试以下方法：

HTML

<div id="animation"></div>

---

您可以在不需要JS的情况下实现所需的效果。我会尝试以下方法：

HTML

<div id="animation"></div>

---

您可以通过CSS使用类似于

：hover

或脚本的方式来实现这一点。在这里，我将演示这两种方法

函数修改类（）{
if（document.getElementById（“animation”）.classList.contains（'running'））{
document.getElementById（“动画”）.classList.remove（'running'）；
}否则{
document.getElementById（“动画”）.classList.add（'running'）；
}
//document.getElementById（“动画”）.classList.toggle（“运行”）；
}
var el=document.getElementById（“动画”）；
el.addEventListener（“单击”，修改类，假）
@关键帧运行{
从{
背景位置：0px；
}
到{
背景位置：-1536px；
}
}
#动画{
宽度：256px；
高度：256px；
背景图像：url（'https://i.stack.imgur.com/aH5zB.jpg');
动画：运行。5步（6）无限；
动画持续时间：3s；
动画计时功能：轻松自如；
动画迭代次数：无限；
动画方向：交替；
}
#动画。暂停{
动画播放状态：暂停；
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
}
#动画。暂停：悬停，
#动画。跑步{
动画播放状态：运行；
-webkit动画播放状态：正在运行；
-moz动画播放状态：正在运行；
-o-动画播放状态：正在运行；
}
.集装箱{
边缘顶部：1米；
}

做吧
您可以通过CSS使用类似于
：hover
或脚本的方式来完成此操作。在这里，我将演示这两种方法


函数修改类（）{
if（document.getElementById（“animation”）.classList.contains（'running'））{
document.getElementById（“动画”）.classList.remove（'running'）；
}否则{
document.getElementById（“动画”）.classList.add（'running'）；
}
//document.getElementById（“动画”）.classList.toggle（“运行”）；
}
var el=document.getElementById（“动画”）；
el.addEventListener（“单击”，修改类，假）
@关键帧运行{
从{
背景位置：0px；
}
到{
背景位置：-1536px；
}
}
#动画{
宽度：256px；
高度：256px；
背景图像：url（'https://i.stack.imgur.com/aH5zB.jpg');
动画：运行。5步（6）无限；
动画持续时间：3s；
动画计时功能：轻松自如；
动画迭代次数：无限；
动画方向：交替；
}
#动画。暂停{
动画播放状态：暂停；
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
}
#动画。暂停：悬停，
#动画。跑步{
动画播放状态：运行；
-webkit动画播放状态：正在运行；
-moz动画播放状态：正在运行；
-o-动画播放状态：正在运行；
}
.集装箱{
边缘顶部：1米；
}

做吧
试过了，我在问题中写下了，没有用：（您可以更新您的示例以实际显示问题吗？就是这样。不能再简化了。它是完整的和可验证的。我更新了我的示例以使用
背景图像
。请告诉我是否可以提供更多帮助。在您发布的初始代码中，选择器上方有一行
；
，但它已被其中一个编辑。您的项目中可能仍然有错误的分号。请注意，
#动画。暂停的
不是有效的选择器，也不是有效的选择器。暂停的
。但是，您仍然需要暂停的状态选择器至少与未暂停的状态选择器具有相同的特定性，或者