Elaborar. Tengo un código de animación en CSS que quiero que permanezca activo durante 3 segundos después de cada clic de botón. Mi código HTML
Necesita una solución. Gracias
function coinflip() { // gets random value from 0-1 var coinside = Math.random(); //get ready to change the img src var img = document.getElementById("coinimage"); // if coin is greater than or equal to 0.5 then good if (coinside <= 0.5) { img.src = "CatCoingood.png"; } else { // when less then 0.5 😡 img.src = "CatCoinbad.png"; } } .catcoinZ { background: none; border: none; } .catcoinZ:active { perspective: 500px; display: flex; justify-content: center; align-items: center; height: 25vh; transform: rotateY(45deg); animation: rotateAnimation 1s linear infinite; animation-duration: 3s; } @keyframes rotateAnimation { from { transform: rotateY(45deg); } to { transform: rotateY(225deg); } } <button class="catcoinZ" onclick="coinflip();"><img id="coinimage" src="CatCoindefault.png" width="250" height="250"></button>¿Es esta la funcionalidad que buscas? Cambie de :active a .active y luego agregue y elimine la clase usando Jquery.
function coinflip() { // gets random value from 0-1 var coinside = Math.random(); //get ready to change the img src var img = document.getElementById("coinimage"); // if coin is greater than or equal to 0.5 then good if (coinside <= 0.5) { img.src = "CatCoingood.png"; } else { // when less then 0.5 😡 img.src = "CatCoinbad.png"; } } $("button").click(function() { var button = $(this); $(button).addClass('active'); setTimeout(function(){ $(button).removeClass('active'); }, 3000); }); .catcoinZ { background: none; border: none; } .catcoinZ.active { perspective: 500px; display: flex; justify-content: center; align-items: center; height: 25vh; transform: rotateY(45deg); animation: rotateAnimation 1s linear infinite; animation-duration: 3s; } @keyframes rotateAnimation { from { transform: rotateY(45deg); } to { transform: rotateY(225deg); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="catcoinZ" onclick="coinflip();"><img id="coinimage" src="https://via.placeholder.com/150" width="250" height="250"></button>