如何使用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動畫？

回答

相關問題