'edit CSS animation duration with JS

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

javascriptcssanimationduration


Solution 1:[1]

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'

Solution 2:[2]

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; }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chakib Salah
Solution 2 Kowalkox

Related Questions