Best IT Recipes

How to pause and resume CSS3 animations using JavaScript?

I tried google and am looking from this forum for a solution to my problem, but so far no luck. I would like to pause my CSS3 animation (image slide show) by clicking the image, and also return to the same animation by clicking the image.

I know how to pause the slide show, and I was also able to resume it once, but then it stops working if I try to pause and resume more than once. This is what my code looks like:

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

I do not want to use any JS libraries (e.g. jQuery) or any other external solution.

I assume that my functions inside the doStuff function still work, and therefore pause and resume only work once.

Is there a way to clear these functions after I clicked them once? Or am I trying to do this completely wrong? Help is appreciated. :)

+51
javascript css3 animation resume
Apr 27 2018-11-12T00:
source share
5 answers

Here is a solution using 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 solution (shorter and more readable):

 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">
+32
Apr 27 '11 at 13:16
source share

I find it easier to do this with the css class. With it, you can use prefixes for each browser.

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

Then you need to add or remove this class in your animated element. yo pause / resume animation.

+140
09 Oct
source share

This should broaden the answer given by Louis Hijarrubiya

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

On my page, I initiated a class change from the parent element. All I wanted to do was rotate the image inside. But it seems that since I did not use hovering, adding a paused class didn't make any difference to the animation state.

Using! Important ensures that these values ​​are overwritten with the newly added CSS values.

+7
Jul 17 '14 at 5:41
source share
 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; } }
+1
Jul 20 '15 at 8:20
source share

I have not tested it, but maybe something like this?

 <!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>
-one
Apr 15 '14 at 19:27
source share


More articles:


All Articles