Solution 1 :

One possible answer which seems to be working (for now):

I only add “animation-duration: 0.7s” to the Id of the element that the animation gets applied to. From there, I can use document.getElementById(elementId).style.animationDuration to set the animation to whatever I want.

Solution 2 :

CSS variables can help you here.

Set the class up initially as you normally would except make the animation-duration a var instead of a fixed amount.

.classname {
  animation-name: your keyframes name;
  animation-iteration-count: whatever you want;
  etc for any animation properties you want to set
  animation-duration: var(--speed);

Then your JS function can change it whenever you get a time you’d like to set without needing to have set any element with the class:

function changeSpeed(n) {'--speed', n + 's');

I’ve used body here but any element containing any other element you want to animate in the future will do.

Problem :

Put simply, I have a class that I apply to an element when a certain event happens. It is a CSS keyframe animation, and I use classList.toggle to apply the animation at the right time. However, I need to be able to edit a property of this class (animation duration) before I even apply the class to the element.

Is there a way to edit a class which has not yet been applied to any element using only JavaScript (not jQuery)?

What I’m looking for:

function changeSpeed(n) {
// Get class and be able to change the properties
// Edit animation and change duration to "s" seconds 
// Example: = `animation-name` + n + `s`;