Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

Question

Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

I already know how to do this once. However, I would like the animation to restart or begin again when the user clicks on it a second time.

Here is what I have:

function animation() {
  document.getElementById('ExampleButton').className = 'Animation';
}

.ExampleButtonCSS {
  position: fixed;
  bottom: 113px;
  background: rgba(0, 0, 0, 0);
  color: #cfcfcf;
  width: 100%;
  padding-left: 20px;
}

#ExampleButton {
  cursor: pointer;
  font-size: 15px;
  outline-color: #000;
  outline-style: auto;
  outline-width: 2px;
  padding: 5px;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: #cfcfcf;
  opacity: 0;
}

.Animation {
  opacity: 0;
  animation: inactivity 5s ease normal;
}

@keyframes inactivity {
  from {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="ExampleButtonCSS">
  <button id="ExampleButton" onclick="animation()">Fade in and Out</button>
</div>

So, my question is, how can I make it so that when I click on it, the animation restarts if it's currently animating, or starts again if it has already completed at any point?

javascript html css animation button

Answer 1

Answer №1

To achieve the desired effect, you must implement the animationend event.

<div class="ExampleButtonCSS">
  <button id="ExampleButton"> Fade in and Out </button>
</div>

const explmButton = document.getElementById('ExampleButton')

explmButton.onclick = () =>
  {
  explmButton.classList.add('Animation')
  }
explmButton.onanimationend = () =>
  {
  explmButton.classList.remove('Animation')
  }

Answer 2

To achieve the desired effect, you must implement the animationend event.

<div class="ExampleButtonCSS">
  <button id="ExampleButton"> Fade in and Out </button>
</div>

const explmButton = document.getElementById('ExampleButton')

explmButton.onclick = () =>
  {
  explmButton.classList.add('Animation')
  }
explmButton.onanimationend = () =>
  {
  explmButton.classList.remove('Animation')
  }

Answer 3

Answer №2

I'm not quite sure what you're looking for.

One way to achieve the desired effect is by resetting the class of your element after the animation has finished.

function resetAnimation() {
  document.getElementById('ExampleButton').className = '';
  document.getElementById('ExampleButton').className = 'Animation';
  setTimeout(() => {
    document.getElementById('ExampleButton').className = '';
  }, 5000)
}

.ExampleButtonCSS {
  position: fixed;
  bottom: 113px;
  background: rgba(0, 0, 0, 0);
  color: #cfcfcf;
  width: 100%;
  padding-left: 20px;
}

#ExampleButton {
  cursor: pointer;
  font-size: 15px;
  outline-color: #000;
  outline-style: auto;
  outline-width: 2px;
  padding: 5px;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: #cfcfcf;
}

.Animation {
  opacity: 0;
  animation: inactivity 5s ease normal;
}

@keyframes inactivity {
  from {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="ExampleButtonCSS">
  <button id="ExampleButton" onclick="resetAnimation()">Fade in and Out</button>
</div>

Answer 4

I'm not quite sure what you're looking for.

One way to achieve the desired effect is by resetting the class of your element after the animation has finished.

function resetAnimation() {
  document.getElementById('ExampleButton').className = '';
  document.getElementById('ExampleButton').className = 'Animation';
  setTimeout(() => {
    document.getElementById('ExampleButton').className = '';
  }, 5000)
}

.ExampleButtonCSS {
  position: fixed;
  bottom: 113px;
  background: rgba(0, 0, 0, 0);
  color: #cfcfcf;
  width: 100%;
  padding-left: 20px;
}

#ExampleButton {
  cursor: pointer;
  font-size: 15px;
  outline-color: #000;
  outline-style: auto;
  outline-width: 2px;
  padding: 5px;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: #cfcfcf;
}

.Animation {
  opacity: 0;
  animation: inactivity 5s ease normal;
}

@keyframes inactivity {
  from {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="ExampleButtonCSS">
  <button id="ExampleButton" onclick="resetAnimation()">Fade in and Out</button>
</div>

Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

Answer №1

Answer №2

Similar questions

What is the process for creating a progress bar in PixiJS?

Learn how to automatically retrieve messages without refreshing the page by leveraging the power of AJAX

NextJS is currently unable to identify and interpret TypeScript files

Convert TypeScript-specific statements into standard JavaScript code

How can you decode JSON using JavaScript?

CSS: How come this inline-block div is not appearing on the same line as intended?

Retrieve the object when hovering over an element in the grid

Achieving a seamless blend of parent background with child background: A step-by

Transmit information from Ajax to CodeIgniter's controller

What is the best method for storing a Google Analytics object in a $_SESSION variable when transitioning between PHP scripts to avoid encountering a non-object error

Click the button to reset all selected options

Utilizing the `filterBy` function with a custom select list that changes dynamically

When working with Node.JS, is it necessary to include 'event' if you include 'net' using the require statement?

What is the best way to transfer data from Material UI to Formik?

What could be causing the Material UI tabs to malfunction when dynamically populating the content using a .map function instead of manually inserting it?

Creating a stacked chart in Angular using chart.js with JSON array of objects values

Upload file to database and move to new location

Why isn't the background of the container div at the top when using multiple CSS sheets?

What is the method to obtain the coordinates based on a city name, and subsequently store those coordinates in a variable?

The VueJS component failed to import successfully