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