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

我试过谷歌，从这个论坛看我的问题的解决方案，但没有运气到目前为止。我想通过单击图片来暂停我的CSS3动画（图像幻灯片放映），并通过单击图片恢复到相同的动画。如何使用JavaScript暂停和恢复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只能运行一次。

有没有办法在我点击一次后清除这些功能？还是我想以完全错误的方式做到这一点？帮助表示赞赏。 :)

来源

2011-04-27 nqw1

这里是一个解决方案使用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">

来源

2011-04-27 13:16:34

这个评论来得有点迟，但是谢谢你！它解决了这个问题。 – nqw1 2011-08-09 08:31:46

128

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

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

然后你只需要添加或删除这个类到你的动画元素哟暂停/恢复动画。

来源

2012-10-09 09:27:33

这是一个更好的解决方案，应该是被接受的答案，更干净。 – 2013-05-31 09:41:01

这应该是公认的答案 – psychobunny 2014-01-02 22:49:44

下面是一个例子来说明：http://jsfiddle.net/fRzwS/313/ – ayjay 2014-02-09 23:17:12

我还没有测试过，但可能是这样的？

<!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>

来源

2014-04-15 19:27:53 user40521

这是为了延长路易斯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; 
    }

给我的主页，我的触发类从父元素的更改答案。我只想旋转里面的图像。但是，似乎因为我没有使用悬停，添加已暂停的类对动画状态没有影响。

使用！重要的是确保这些值被新添加的CSS值覆盖。

来源

2014-07-17 05:41:45 tensai

只是为了澄清，这是因为css的特异性。将属性直接添加到元素的脚本（如Sime的答案）不会出现此问题，因为默认情况下，“内联”样式会覆盖样式表中的规则。 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – xec 2015-11-26 08:21:35

这是您的HTML和CSS引发的特定问题。充其量，这应该是一个评论，它不回答实际问题。 – 2016-01-18 06:05:26

来这里发布这个答案，如果它没有发布。就我而言，我需要暂停几个同步动画，并发现这是最简单的方法。它也允许你添加诸如'.pause：hover'的效果，如果它符合需要的话。 – 2017-10-24 16:28:48

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; 
    } 
}

来源

2015-07-20 08:20:03

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

回答

相关问题