我试图谷歌，并从这个论坛上寻找我的问题的解决方案，但到目前为止没有运气。我想通过单击图片来暂停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只能运行一次。
doStuff
pause
resume
单击一次后是否可以清除这些功能？还是我试图以一种完全错误的方式做到这一点？感谢帮助。:)
这是使用javascript的解决方案：
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">
jQuery解决方案（更简短，更易读）：
var imgs = $('.pic'), playState = '-webkit-animation-play-state'; imgs.click(function() { imgs.css(playState, function(i, v) { return v === 'paused' ? 'running' : 'paused'; }); $('body').toggleClass('paused', $(this).css(playState) === 'paused'); }); .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; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff"> <img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">
