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.

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) {
  document.body.style.setProperty('--speed', n + 's');
}

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

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: CLASSNAME.style.animation = `animation-name` + n + `s`;
}