To elaborate. I have an animation code in CSS that I want to remain active for 3 seconds after each button click. My code HTML
Need a solution. Thanks
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>Is this the functionality your are looking for? Change from :active to .active and then add and remove the class using 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>