How to enable CSS animation with a button everytime when the user clicks on then it starts over

user_15154185 0
Viewed 173

I know already how to do that only one time. But I want that when the user clicks on it again then the animation starts over or starts again.

I have thiese:

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, how can I do that if I click on it the it starts over if it is already animating or starts again if its already over anytime

button animation css html javascript
2 Answers

you need to use 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')
  }
user_106690100

I don't fully understand what you want.

But you can reset the class of your element after the animation is done.

function animation() {
  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="animation()">Fade in and Out</button>
</div>

user_15405600
Related