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. :)
