How to Pause and Resume Css3 Animation Using JavaScript

How to pause and resume CSS3 animation using JavaScript?

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

How do I pause ALL CSS animations and resume when needed

Use loop all of elemnt with class name an and set .style.animationPlayState to each one
also use getElementsByClassName() to get all elements with class name an

var song = document.getElementById("ad");
 function togglePlay() { song.play(); var items=document.getElementsByClassName("an");  for (var i=0; i < items.length; i++) {    items[i].style.animationPlayState = "running";  }} function togglePause() { song.pause();  var items=document.getElementsByClassName("an");  for (var i=0; i < items.length; i++) {    items[i].style.animationPlayState = "paused";  }  }

.lyrics { font-weight: lighter; font-size: 1vw;}
.l1.an { animation: tae 1s; animation-direction: alternate; animation-duration: 5s; animation-delay: 12s; }
.l2.an { animation: tae 1s; animation-duration: 5s; animation-fill-mode: alternate; animation-delay: 15s; }
.l3.an { animation: tae 1s; animation-duration: 8s; animation-fill-mode: alternate; animation-delay: 18s; }
.l4.an { animation: tae 1s; animation-duration: 7s; animation-fill-mode: alternate; animation-delay: 24s; }
.l5.an { animation: tae 1s; animation-duration: 8s; animation-fill-mode: alternate; animation-delay: 29s; }

@keyframes tae { 0% {background: initial;} 30% {background: blue;} 60% {background: blue;} 100% {background: initial;}}

<audio id="ad"><source src = "pup.mp3" type="audio/mp3"></audio>
<script type="text/javascript">
</script>
<div class="bg"></div>  <div class="bg-box">    <img src="PUPLogo.png"><p class="PUP">Polytechnic University of the Philippines</p>
<h1>PUP HYMN</h1><p class="lyrics"><div class="l1 an">Sintang Paaralan</div><div class="l2 an">Tanglaw ka ng bayan</div><div class="l3 an">Pandayan ng isip ng kabataan</div><div class="l4 an">Kami ay dumating nang salat sa yaman<br></div><div class="l5 an">Hanap na dunong ay iyong alay<br></div><!--I cut the lyrics here to make it shorter-->
<input type="button" value="Play" onclick="togglePlay()" class="but" /><input type="button" value="Pause" onclick="togglePause()" class="but"/>

</div>

How can I pause and resume this animation and can it be done with pure CSS?

You just have to speed up animation, add a no animation frame and set animation as infinite.

As here :

https://jsfiddle.net/w776Lq1u/5/

 .shake {
      animation: shake 1s cubic-bezier(.36,.07,.19,.97) running infinite;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px;
    }

    @keyframes shake {


      0%, 100% {
        transform: translate3d(0, 0, 0);
      }

      30%, 70% {
        transform: translate3d(-1px, 0, 0);
      }

      35%, 65% {
        transform: translate3d(2px, 0, 0);
      }

      40%, 50%, 60% {
        transform: translate3d(-4px, 0, 0);
      }

      45%,55% {
        transform: translate3d(4px, 0, 0);
      }
    }

How to Pause and Resume Css3 Animation Using JavaScript

How to pause and resume CSS3 animation using JavaScript?

How do I pause ALL CSS animations and resume when needed

How can I pause and resume this animation and can it be done with pure CSS?

Related Topics

Leave a reply