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

Question

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?

Answer 1

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>

Answer 2

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>

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

Question

2 answers

solution1
0 2021-10-19 22:27:10

solution2
0 2021-10-19 23:10:44

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

Question

2 answers

solution1 0 2021-10-19 22:27:10

solution2 0 2021-10-19 23:10:44

solution1
0 2021-10-19 22:27:10

solution2
0 2021-10-19 23:10:44