A button to toggle css animation paused | running play state

Question

I have a working css animation. My graphic is SVG. I have been trying to add a button to play and pause the animation on click, but I just can't seem to get it work.

What I have managed so far is as below.

    .animation1 {
        --animation-delay: 0.1s;
        animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
    }
    
    .playani {
        animation-play-state: running;
    }
    
    .animation1:hover {
        animation: none;
        fill: #666;
    }

@keyframes ani_keyframes {
...
...

}

user_13368658 · Answer

use

document.querySelector('.animation1');

instead of

document.getElementsByClassName('animation1');

I add a translate animation for the demo. Hope it works :).

var button = document.getElementById('button-ani');
var test_ani = document.querySelector('.animation1');
    
button.onclick = function(){
  test_ani.classList.toggle('playani');
}

.animation1 {
  --animation-delay: 0.1s;
  animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
}

.playani {
  animation-play-state: running;
}

.animation1:hover {
  animation: none;
  fill: #666;
}

@keyframes ani_keyframes {
  from{
    transform:translateX(0px);
  }
  to{
    transform:translateX(-100px);
  }

}

user_8233548 · Answer

Since using document.getElementsByClassName('animation1') gives you HTMLCollection while ClassList applies to element so you can select the element by using indexer. and then your code works perfectly.

var button = document.getElementById('button-ani');

var test_ani = document.getElementsByClassName('animation1');
//this will give you HTML collection object so use [0] to access the element.        
    
    button.onclick = function(){
      test_ani[0].classList.toggle('playani');
      }

  .animation1 {
        --animation-delay: 0.1s;
        animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
    }
    
    .playani {
        animation-play-state: running;
    }
    
    .animation1:hover {
        animation: none;
        fill: #666;
    }
    @keyframes ani_keyframes {
  from{
    transform:scale(0);
  }
  to{
    transform:scale(1.1);
  }

}

A button to toggle css animation paused | running play state

2 Answers