edit CSS animation duration with JS-CodePudding

How could I change the duration of flipHeads from 3s to 0s using pure Javascript?

CSS:

.animate-Heads{
  animation: flipHeads 3s;
  animation-fill-mode: forwards;
}

Any help is greatly appreciated

CodePudding user response：

You can try

 const animateHeads = document.getElementsByClassName('animate-Heads')

 /*animateHeads is now an array which contains elements that have 'animate-Heads' as class name , saying you want to change the duration of the first element */

 animateHeads[0].style.animationDuration = '0s'

CodePudding user response：

Im not fan on inline css so i would add class to element. document.querySelector('.animate-Heads').classList.add('remove-duration')

.animate-Heads.remove-duration{ animation-duration: 0s; }