What's the best way to prolong the duration of a CSS animation?

Question

What's the best way to prolong the duration of a CSS animation?

I have a code snippet here that is designed to style a button when it is clicked and then maintain the style even after the click for a more aesthetically pleasing look. I'm wondering if there might be another approach to achieve this effect? Thanks!

// Clicked button receives enhanced styling
document.querySelectorAll('button[type="button"]').forEach(button => {
  button.addEventListener("click",event => {
    // Apply styling
    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 styling 
    event.target.style.removeProperty("box-shadow");
    event.target.style.removeProperty('border-radius');
    event.target.style.removeProperty('transition-duration');
    event.target.style.removeProperty('transform');
    }, 110);
  });
});

javascript css

Answer 1

Answer №1

Perfection is key in your approach. I would suggest moving the click-specific styling to a CSS class, then adding and removing the class from the button after a certain time interval.

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 file, you can define the style for the "beautiful" class like this:

button {
  transition-duration: 45ms; // This should be included in the standard 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

Perfection is key in your approach. I would suggest moving the click-specific styling to a CSS class, then adding and removing the class from the button after a certain time interval.

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 file, you can define the style for the "beautiful" class like this:

button {
  transition-duration: 45ms; // This should be included in the standard 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 3

Answer №2

Apply this style to every button element

.customButton{
  // default button styling 
  transition: transform 0.5s;  // specify effect duration
}

.customButton:active {
  // Styling for when the button is clicked
  transition:  0s;
}

Answer 4

Apply this style to every button element

.customButton{
  // default button styling 
  transition: transform 0.5s;  // specify effect duration
}

.customButton:active {
  // Styling for when the button is clicked
  transition:  0s;
}

What's the best way to prolong the duration of a CSS animation?

Answer №1

Answer №2

Similar questions

Vuetify 3 now displays full text in v-autocomplete without an ellipsis

What is the process for updating the names and IDs of HTML elements?

Using AngularJS to maintain a 'Token' throughout the duration of the application

Utilize JavaScript to identify the orientation of an iPad device

Tips for transferring information between two distinct ports within a single application

Display a pop-up alert message when the session expires without the need to manually refresh the page

Design a circular progress bar with a cut-off at the bottom

I am looking to load an alert message simultaneously with loading an HTML link

I need to retrieve data from two different databases. What is the best way to combine the code into a single function?

Highlight text when the user is scrolling the page - using JQUERY

Restrict the maximum and minimum time that can be entered in an HTML input

Looking to retrieve data using Cheerio? If you're finding that the data appears empty in the page source but is visible when inspecting the elements, here's how you can go

The Google Chrome console is failing to display the accurate line numbers for JavaScript errors

Removing the empty option in a select element with ng-model

An endless expanse of flooring within a THREE.JS environment

Centering an Image with CSS

The onClick event is not functioning properly with React's select and option elements

Troubleshooting: React Testing Library Issue with Updating Material UI DatePicker Input Content

Add an image to a div element and determine its height, then apply the height to the CSS property

The persistent redirection issue in Node.js - Middleware