Ya sé cómo hacer eso solo una vez. Pero quiero que cuando el usuario vuelva a hacer clic en él, la animación comience de nuevo o comience de nuevo.
tengo estos:
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>Entonces, ¿cómo puedo hacer eso si hago clic en él y comienza de nuevo si ya está animado o comienza de nuevo si ya terminó en cualquier momento?
necesitas usar 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') }No entiendo completamente lo que quieres.
Pero puede restablecer la clase de su elemento después de que finalice la animación.
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>