How do you pause a CSS animation with an HTML button?

user_16937458 0
Viewed 262

I'm trying to pause a CSS animation with an HTML button click, using JS to carry out the pause. So far I've tried to change the animation state using JS but it isn't working - the animation plays through and the button seems to have no effect.

Here's my JS snippet:

var sun = document.getElementById("sun");

var sky = document.getElementById("sky");

var pauseBtn = document.getElementById("pauseBtn");

function pauseAnimation(){
    if((pauseBtn.clicked) == true){
        sun.style.animationPlayState("paused");
        sky.style.animationPlayState("paused");
    }
}
h2:after {
 content : ' no css!';
 color   : red;
 }
<h2>no HTML</h2>

Can share more code if necessary, any tips based on what you see with the JS?

animation linker css html javascript
2 Answers

You can add or remove a class name that you define the CSS animation to when you want to pause or resume the animation.

<style>
    .sky-animation-class-name {
      animation: /* animation properties */;
    }
    .sun-animation-class-name {
      animation: /* animation properties */;
    }
  </style>
  <body>
      <div id="sky" class="sky-animation-class-name"></div>
      <div id="sun" class="sun-animation-class-name"></div>
  </body>
  <script>
    var sky = document.getElementById("sky");
    var sun = document.getElementById("sun");

    var pauseBtn = document.getElementById("pauseBtn");
    var resumeBtn = document.getElementById("resumeBtn");

    function pauseAnimation(){
        if((pauseBtn.clicked) == true){
            sky.classList.remove("sky-animation-class-name");
            sun.classList.remove("sun-animation-class-name");
        }
    }

    function resumeAnimation(){
        if((resumeBtn.clicked) == true){
            sky.classList.add("sky-animation-class-name");
            sun.classList.add("sun-animation-class-name");
        }
    }
  </script>

user_136792290

this way

const
  sun  = document.querySelector('#sun')
, btPP = document.querySelector('#PlayPause')
  ;
btPP.onclick = () =>
  {
  btPP.textContent = sun.classList.toggle('pause') ? 'Play' : 'Pause'
  }
article { 
  margin:1em; 
  }
#sun{
  background-color : orange;
  color            : #fff;
  margin           : auto;
  margin-left      : auto;
  margin-left      : 0;
  border           : 5px  dotted yellow;
  width            : 100px;
  height           : 100px;
  border-radius    : 50%;
  }
.pause {
  animation-play-state: paused;
  }
.animating {
  animation-name            : slide;
  animation-duration        : 3s;
  animation-timing-function : ease-in;
  animation-iteration-count : infinite;
  animation-direction       : alternate;
  }
@keyframes slide {
  from { margin-left : 0   }
  to   { margin-left : 80% }
  }
<article>
  <div id="sun" class="animating"></div>
</article>
<button id="PlayPause"> Pause</button>

user_106690100
Related