¿Cuál es el código que me permite reproducir y detener la animación del logotipo en html, css o js?
Estoy tratando de hacer que la animación de mi logotipo se reproduzca cada vez que alguien presiona un botón específico.
Gracias,
Aquí tiene un ejemplo de un "logotipo" que gira cuando se hace clic en el botón agregando un nombre de clase al logotipo. Cuando la animación haya terminado, se eliminará el nombre de la clase.
var logo = document.getElementById('logo'); document.querySelector('button').addEventListener('click', e => { logo.classList.add('rotate'); }); logo.addEventListener('animationend', e => { e.target.classList.remove('rotate'); }); #logo { transform: rotate(0deg); } .rotate { animation: rotate 2s; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } <svg id="logo" viewBox="0 0 2 2" width="100"> <rect width="2" height="2" fill="orange"/> </svg> <button>Rotate</button>Como mencionó sigurd-mazanti, puede configurar un Click Listener ( addEventListener ) en algunos botones y cada vez que se hace clic en un botón, cambiar entre las clases de animación en el elemento de su logotipo.
const logo = document.querySelector("img"); document.querySelectorAll("button").forEach((btn) => { let animation = ""; btn.addEventListener("click", function() { switch (btn.id) { case "btn1": animation = "flash"; break; case "btn2": animation = "shake"; break; case "btn3": animation = "beat"; break; } logo.className = animation; }); }); .flash { animation: flash .7s ease infinite; } @keyframes flash { from { opacity: 1; } 50% { opacity: 0; } to { opacity: 1; } } .shake { animation: shake 0.5s linear infinite; } @keyframes shake { from { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } to { transform: rotate(0deg); } } .beat { animation: beat 0.3s ease infinite; } @keyframes beat { from { transform: scale(1) } 25% { transform: scale(0.95) } to { transform: scale(1) } } <img src="https://source.unsplash.com/6TQdGPcgLZA/640x400" style="display: block; width: 200px;" alt="" /> <div style="margin: 15px;"> <button id="btn1">Flash</button> <button id="btn2">Shake</button> <button id="btn3">Beat</button> </div>