How to make animation runned and then stopped in CSS?-CodePudding

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);}
}

CodePudding user response：

#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.

CodePudding user response：

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>