Menu
I've tried to google and look from this forum a solution for my problem but no luck so far. I would like to pause my CSS3 animation (image slide show) by clicking a picture and also resume to the same animation by clicking a picture.
I know how to pause the slide show and I was also able to resume it once, but then it stops working if try to pause and resume more than one time. Here is how 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 don't want to use any JS libraries (e.g. jQuery) or any other external solution.
My guess is that my functions inside doStuff function are still running and that's why pause and resume works only once.
Is there a way to clear these functions after I have clicked them once? Or am I trying to do this in a totally wrong way? Help is appreciated. :)
343
Use a transition time of 0.6s when you hover and an animation time of 0.01 when you hover off. This way, the animation will reset itself to its original position pretty much immediately and stop the funky behaviour.
To create infinite animations in CSS, we will use the property animation-iteration-count: infinite;.
I find it easier to do it with a css class. With it, you can use prefixes for every browser.
.paused{ -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused; } Then you only have to add or remove this class to your animated element yo pause / resume the animation.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
