How to make animation runned and then stopped in CSS?

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