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

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

javascript animation css

如何使用JavaScript暂停和恢复CSS3动画？,javascript,animation,css,resume,Javascript,Animation,Css,Resume,我试着用谷歌搜索，从这个论坛上寻找解决我问题的方法，但到目前为止运气不好。我想通过单击图片暂停我的CSS3动画（图像幻灯片放映），并通过单击图片恢复到相同的动画我知道如何暂停幻灯片放映，我也可以恢复一次，但如果尝试暂停和恢复多次，它就会停止工作。下面是我的代码的样子： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .pic {

我试着用谷歌搜索，从这个论坛上寻找解决我问题的方法，但到目前为止运气不好。我想通过单击图片暂停我的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>


图{
位置：绝对位置；
不透明度：0；
}
#图1{
-webkit动画：pic1 4s无限线性；
}
#图2{
-webkit动画：pic2 4s无限线性；
}
@-webkit关键帧pic1{
0%{不透明度：0；}
5%{不透明度：1；}
45%{不透明度：1；}
50%{不透明度：0；}
100%{不透明度：0；}
}
@-webkit关键帧pic2{
0%{不透明度：0；}
50%{不透明度：0；}
55%{不透明度：1；}
95%{不透明度：1；}
100%{不透明度：0；}
}
函数doStuff（）{
var pic1=document.getElementById（“pic1”）；
var pic2=document.getElementById（“pic2”）；
pic1.style.webkitAnimationPlayState=“暂停”；
pic2.style.webkitAnimationPlayState=“暂停”；
pic1.onclick=函数（）{
pic1.style.webkitAnimationPlayState=“running”；
pic2.style.webkitAnimationPlayState=“running”；
}
pic2.onclick=函数（）{
pic1.style.webkitAnimationPlayState=“running”；
pic2.style.webkitAnimationPlayState=“running”；
}
}

我不想使用任何JS库（例如jQuery）或任何其他外部解决方案

我猜想

doStuff

函数中的函数仍在运行，这就是为什么

pause

和

resume

只能运行一次

单击这些函数一次后，是否有方法清除它们？还是我试图用一种完全错误的方式来做这件事？感谢您的帮助。：）

下面是一个使用javascript的解决方案：

var-imgs=document.querySelectorAll（'.pic'）；
对于（变量i=0；i


.pic{
位置：绝对位置；
不透明度：0；
}
#图1{
-webkit动画：pic1 4s无限线性；
}
#图2{
-webkit动画：pic2 4s无限线性；
}
@-webkit关键帧pic1{
0% {
不透明度：0；
}
5% {
不透明度：1；
}
45% {
不透明度：1；
}
50% {
不透明度：0；
}
100% {
不透明度：0；
}
}
@-webkit关键帧pic2{
0% {
不透明度：0；
}
50% {
不透明度：0；
}
55% {
不透明度：1；
}
95% {
不透明度：1；
}
100% {
不透明度：0；
}
}
.停顿{
背景色：#ddd；
}
我发现使用css类更容易做到这一点。使用它，您可以为每个浏览器使用前缀
.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

然后，您只需在动画元素中添加或删除该类，即可暂停/恢复动画。
我还没有测试过它，但可能是类似的东西
<!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>


.pic{位置：绝对；不透明度：0；}
.pic1{-webkit动画：pic1 4s无限线性；}
.pic2{-webkit动画：pic2 4s无限线性；}
@-webkit关键帧pic1{0%{opacity:0；}
5%{不透明度：1；}
45%{不透明度：1；}
50%{不透明度：0；}
100%{不透明度：0；}}
@-webkit关键帧pic2{0%{opacity:0；}
50%{不透明度：0；}
55%{不透明度：1；}
95%{不透明度：1；}
100%{不透明度：0；}}
函数doStuff（）{
var pic1=document.getElementById（“pic1”）；
var pic2=document.getElementById（“pic2”）；
pic1.className=“pic暂停”；
pic2.className=“pic暂停”；
pic1.onclick=函数（）{
pic1.className=“pic pic1”；
pic2.className=“pic pic2”；
}
pic2.onclick=函数（）{
pic1.className=“pic pic1”；
pic2.className=“pic pic2”；
}
}
这是对路易斯·希贾鲁比亚给出的答案的扩展
.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，添加暂停类对动画状态没有影响
使用！重要信息：确保这些值被新添加的CSS值覆盖。
这是一个更好的解决方案，应该是公认的答案，更简洁。感谢您的回答Luis Hijarrubia，但我正在寻找一种使用JS的方法。对于其他情况，这可能更好，但对于我的应用程序则不然。@nq1 CSS是正确的方法。使用JavaScript添加类。与公认的答案不同，此答案还具有跨浏览器兼容性。这似乎是更好的解决方案，但我无法让它发挥作用。它要求动画是无限的吗？我知道，但是@Nate和其他人。添加！重要信息
到每一行。CSS遵循特定性，规则越具体，其属性就越突出<代码>动画播放状态：暂停！重要的修复了这个“问题”（css是如何设计的，但在这里是个问题）。这可能对路易斯有效，因为他做了一个简单的测试，或者没有特异性“冲突”。只是澄清一下，这是因为css特异性。将属性直接添加到元素（如Sime的答案）的脚本不会有此问题，因为“内联”样式会覆盖来自元素的规则
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;
  }
}