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

Personalize the appearance of dynamically generated DIV elements

What is the best way to position a small square box over each td element containing text using css?

Angular JS integration for optimal Bootstrap grid alignment

What is the best way to connect a relative CSS stylesheet to a master page?

Using React to retrieve an object from a helper method through a GET request

What is the best method for combining this function?

What is the best way to center text within a div that is wider than 100%?

Get rid of the white border surrounding the object tag

Zurb Foundation's sections have a strange issue where navigating between them introduces unexpected whitespace

Blue outlined React Select dropdown with search functionality

How can I create editable text using typed.js?

using javascript to access an opened html div

The React component fails to update upon pressing the button

When using the onclick function, an unexpected behavior occurs where instead of displaying content, the page

Is it possible to trigger Material UI Dialogs from the Parent Component?

How can I replay an HTML audio element?

Binding attributes in knockoutjs following an AJAX request

Tips for creating a navigation bar that bypasses body padding in HTML and CSS

Maintain the chosen month in every dropdown toggle div in angular 4

Sending a post request to a Spring controller with ajax: Step-by-step guide