Javascript 如何通过js停止webkit动画+；将图像固定到右侧

我正在尝试建立一个益智游戏网站。我正在使用

webkit动画

旋转（和平移）两幅图像

我的计划是将旋转齿轮连接到页面的左右边缘，以一种每次只显示一半图像的方式进行偏移

动画效果很好，但是

（1） 我无法暂停，而且

（2） 根据窗口大小，图像将移出视图（自动弹出滚动条）或进入全视图

设置非常简单： 我有三个分区：顶部一个100%宽度的条，下面两个50%宽度的分区作为我的图像的容器。 我可能需要在两个分区之间或下方添加更多内容，但目前解决方案已经足够好了^^

对于动画，我在每一侧都有一个伪按钮，它为我的图像添加了一个暂停类

HTML

嘿，这是左边的

暂停

嘿，这是对的

暂停

CSS

#图像1{
-webkit动画：左旋转30秒无限线性；
}
#image1.paused1:：-webkit进度值{
-webkit动画播放状态：暂停；
动物游戏状态：暂停；
}
#图2{
对齐：右；
-webkit动画：旋转右30秒无限线性；
}
#图2.paused2:：-webkit进度值{
-webkit动画播放状态：暂停；
动物游戏状态：暂停；
}
/*动画*/
@-webkit关键帧向左旋转{
从{
-webkit变换：平移（-50%，0px）旋转（0deg）；
}
到{
-webkit变换：平移（-50%，0px）旋转（359度）；
}
}
@-webkit关键帧向右旋转{
从{
-webkit变换：平移（+50%，0px）旋转（0deg）；
}
到{
-webkit变换：平移（+50%，0px）旋转（-359度）；
}
}

Javascript

function pause1() {
  console.log("pause img 1");
  document.getElementById('image1').classList.toggle("paused1");
}
function pause2() {
  console.log("pause img 2");
  document.getElementById('image2').classList.toggle("paused2");
}

总而言之： 我有两张图片放错地方了。他们很活跃。我的两个按钮正在工作，但试图通过添加暂停的类来暂停动画不起作用。

---

如果有任何帮助，我将不胜感激，我将看看是否可以在以后添加图像

您不应该针对

：-webkit进度值

，这是针对

元素的。只需将类切换到元素上：

按钮。addEventListener（'click'，函数（）{
square.classList.toggle（'paused'）；
});
#正方形{
动画：旋转1s无限；
背景：浅蓝色；
边框：1px纯黑；
高度：100px；
左：50px；
位置：绝对位置；
顶部：50px；
宽度：100px；
}
#方。暂停{
动画播放状态：暂停；
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
暂停/恢复
旋转
：：-webkit进度值
仅适用于
元素。我在你的代码中没有看到这些。谢谢你的快速回复，很抱歉这么晚才回复。我可以将该类添加到我的图像中，但是#image1.paused1{animaion play state:paused；}出现了一个“unknown property name”错误，因此在检查正在运行的代码时它仍然不起作用。我得到了这个结果，尽管第二行被“unknown property name”错误划掉了#image1.paused1{动物游戏状态：暂停；}#image1{动画：向左旋转30秒无限线性；动画持续时间：30秒；动画计时功能：线性；动画延迟：0；动画迭代计数：无限；动画方向：正常；动画填充模式：无；动画播放状态：运行；动画名称：向左旋转；}`@nomadDev您使用的浏览器版本是什么？您能提供错误的图像吗？您可能需要在动画属性中添加供应商前缀，如
-webkit animation
，
-moz animation
，等等@skiline3000我使用的是最新的chrome 64位版本76.0.3809.132（当我在另一篇文章中读到时，我看到-webkit-前缀被删除，不再需要了。）虽然它在最新的firefox版本^^@nomadDev中也不起作用，但您正在检查和查看哪些代码？您自己的代码，还是我上面的示例？我正在运行相同的版本，在我的示例中没有看到该错误。如果是您自己的代码，您可以使用新的运行代码更新OP吗？