如何使用JavaScript暂停和恢复CSS3animation？

我试图谷歌，从这个论坛看，我的问题的解决scheme，但没有运气到目前为止。 我想通过点击图片来暂停我的CSS3animation（图片幻灯片），并通过点击图片恢复到相同的animation。

我知道如何暂停幻灯片放映，而且我也能够恢复一次，但是如果尝试暂停和恢复一次以上，则停止工作。 以下是我的代码的样子： 

<!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）或任何其他外部解决scheme。

我的猜测是，我的函数内doStuff函数仍在运行，这就是为什么pause和resume工作只有一次。

点击一次后，有没有办法清除这些function？ 或者我想以完全错误的方式做到这一点？ 帮助表示赞赏。 🙂

这是一个使用javascript的解决scheme： 

 var imgs = document.querySelectorAll('.pic'); for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = toggleAnimation; imgs[i].style.webkitAnimationPlayState = 'running'; } function toggleAnimation() { var style; for (var i = 0; i < imgs.length; i++) { style = imgs[i].style; if (style.webkitAnimationPlayState === 'running') { style.webkitAnimationPlayState = 'paused'; document.body.className = 'paused'; } else { style.webkitAnimationPlayState = 'running'; document.body.className = ''; } } } 
 .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; } } .paused { background-color: #ddd; } 
 <img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff"> <img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">

我发现使用css类更容易。 有了它，你可以使用每个浏览器的前缀。 

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

那么你只需要添加或删除这个类到你的animation元素哟暂停/恢复animation。

这是为了扩大路易斯·希亚鲁比亚（Luis Hijarrubia）给出的答案 

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

在我的页面，我正在触发从父元素的类的变化。 我只想旋转里面的图像。 但是，似乎因为我没有使用hover，暂停类的添加对animation状态没有影响。

使用！important会确保这些值被新添加的CSS值覆盖。 

 var e = document.getElementsById("Your_Id"); e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false); function listener(e) { alert("Your POSITION parameter:" + .target.style.position); switch(e.type) { case "animationstart": d = "Started: elapsed time is " + e.elapsedTime; break; case "animationend": d = "Ended: elapsed time is " + e.elapsedTime; break; case "animationiteration": d= "New loop started at time " + e.elapsedTime; alert("pausing for 1 seconddddddd!!!!!!!"); e.target.style.animationPlayState = "paused"; window.setTimeout(function(){e.target.style.animationPlayState = "running";}, 1000); break; } }

我没有testing过，但也许这样？ 

 <!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.className="pic paused"; pic2.className="pic paused"; pic1.onclick = function(){ pic1.className="pic pic1"; pic2.className="pic pic2"; } pic2.onclick = function(){ pic1.className="pic pic1"; pic2.className="pic pic2"; } } </script> </head> <body> <img id="pic1" class="pic pic1" src="photo1.jpg" /> <img id="pic2" class="pic pic2" src="photo2.jpg" onclick="doStuff()" /> </body> </html>
Interesting Posts