How can I increase the length of a CSS animation?-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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