我已经尝试通过谷歌搜索并从该论坛中寻找解决我问题的方法，但到目前为止还没有成功。我想通过单击图片暂停我的 CSS3 动画(图像幻灯片放映)，并通过单击图片恢复相同的动画。
我知道如何暂停幻灯片放映，我也可以恢复一次，但如果尝试多次暂停和恢复，它就会停止工作。这是我的代码的样子:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.pic {
position: absolute;
opacity: 0;
}
#pic1 {
-webkit-animation: pic1 4s infinite linear;
}
#pic2 {
-webkit-animation: pic2 4s infinite linear;
}
@-webkit-keyframes pic1 {
0% {opacity: 0;}
5% {opacity: 1;}
45% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;}
}
@-webkit-keyframes pic2 {
0% {opacity: 0;}
50% {opacity: 0;}
55% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;}
}
</style>
<script type="text/javascript">
function doStuff(){
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
pic1.style.webkitAnimationPlayState="paused";
pic2.style.webkitAnimationPlayState="paused";
pic1.onclick = function(){
pic1.style.webkitAnimationPlayState="running";
pic2.style.webkitAnimationPlayState="running";
}
pic2.onclick = function(){
pic1.style.webkitAnimationPlayState="running";
pic2.style.webkitAnimationPlayState="running";
}
}
</script>
</head>
<body>
<img id="pic1" class="pic" src="photo1.jpg" />
<img id="pic2" class="pic" src="photo2.jpg" onclick="doStuff()" />
</body>
</html>
我不想使用任何 JS 库(例如 jQuery)或任何其他外部解决方案。
我的猜测是我在 doStuff 函数中的函数仍在运行，这就是为什么 pause 和 resume 只工作一次。
有没有办法在我点击一次后清除这些功能？还是我试图以完全错误的方式做到这一点？感谢帮助。 :)
最佳答案
我发现使用 CSS 类更容易做到这一点。有了它，您可以为每个浏览器使用前缀。
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
然后你只需要添加或删除这个类到你的动画元素你暂停/恢复动画。
关于javascript - 如何使用 JavaScript 暂停和恢复 CSS3 动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5804444/