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