如何增加 CSS animation 的长度？

Question

This code is supposed to style button when clicked and to increase the length of the style even after click for better looking. Or is there any other way to do it? Thanks.

// When button is clicked, apply longer style so it looks better
document.querySelectorAll('button[type="button"]').forEach(button => {
  button.addEventListener("click",event => {
    //Apply style
    event.target.style["boxShadow"] = "0 0 2px 3px rgba(250,189,22,0.95), inset 0 0 4px 0 rgba(250,195,35,1)";
    event.target.style.borderRadius = "0.4rem";
    event.target.style.transitionDuration = "45ms";
    event.target.style.transform = "scale(0.98)";
    setTimeout(() => {
    //Remove the clicked style. Same as before   
    event.target.style.removeProperty("box-shadow");
    event.target.style.removeProperty('border-radius');
    event.target.style.removeProperty('transition-duration');
    event.target.style.removeProperty('transform');
    }, 110);
  });
});

Answer 1

Your way of doing should work perfectly fine. Even though i would move the click specific styling to a CSS class and add the classname to the button when clicked and remove after given amount of ms.

document.querySelectorAll('button[type="button"]').forEach(button => {
  button.addEventListener("click",event => {
    event.target.classList.add("beautiful")
    setTimeout(() => {
      event.target.classList.remove("beautiful")
    }, 110);
  });
});

In your CSS you then would have the class "beautiful".

button {
  transition-duration: 45ms; // needs to be moved to regular button style
}

.beautiful {
  box-shadow: 0 0 2px 3px rgba(250,189,22,0.95), inset 0 0 4px 0 rgba(250,195,35,1);
  border-radius: 0.4rem;
  transform: scale(.98);
}

Answer 2

Add this class to all button

buttonClass{
  // regular button css 
  transition: transform 0.5s;  // set time for effect
}

buttonClass:active {
  // CSS for on button click
  transition:  0s;
}