I try make button to change color using hover and animation. But, when animation loops, color of button comes back to basic version. How can I fix it? Is there any css property to do it? Or bundle of rules? Or maybe I have to go to JS and write some code?
#launch-button {
width: 440px;
height: 100px;
margin-top: 75%;
margin-left: 15%;
border-radius: 45px;
border-color: rgb(255, 255, 255);
}
#launch-button:hover {
animation-name: change-background;
animation-duration: 0.75s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}
@keyframes change-background {
to {background-color: rgba(26, 198, 250, 0.5);}
}#launch-button {
width: 440px;
height: 100px;
margin-top: 75%;
margin-left: 15%;
border-radius: 45px;
border-color: rgb(255, 255, 255);
}
#launch-button:hover {
animation: forwards;
animation-name: change-background;
animation-duration: 0.75s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}
@keyframes change-background {
to {background-color: rgba(26, 198, 250, 0.5);}
}<button type="button" id="launch-button">Hello, world!</button>All that was needed here is animation: forwards;. It keeps the button as the last state of the animation without resetting it.
Maybe ?? I'm not sure if I understand you right but, If you mean set a time out so your animation will last in particular secs, you can attain it this way. Let me know.
$(document).ready(function(){
$('#launch-button').hover(function(){
$("#launch-button").css("background-color", "rgba(26, 198, 250, 0.5)");
setTimeout(function() {
$("#launch-button").css("background-color", "rgb(255, 255, 255)");
}, 5000);
});
});#launch-button {
width: 440px;
height: 100px;
margin-top: 0%;
margin-left: 15%;
border-radius: 45px;
border-color: rgb(255, 255, 255);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="launch-button">
</button>