如何使用JavaScript暂停和恢复CSS3动画?

| 我已经尝试通过Google搜索该论坛,并找到了解决我问题的方法,但到目前为止还没有运气。我想通过单击图片来暂停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
只工作一次的原因。 单击一次后是否可以清除这些功能?还是我试图以完全错误的方式做到这一点?感谢帮助。 :)     
已邀请:
这是使用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\">
我发现使用CSS类更容易做到这一点。有了它,您可以为每个浏览器使用前缀。
.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}
然后,您只需要在动画元素中添加或删除此类即可暂停/恢复动画。     
这是为了扩展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;
}
在我的页面中,我触发了父元素的类更改。我只想旋转内部的图像。但是似乎因为我没有使用悬停,所以添加了暂停的类对动画状态没有影响。 !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;
  }
}
    
我还没有测试过,但也许是这样的?
<!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>
    

要回复问题请先登录注册