How do I freeze an animation in CSS?

Question

I want the keyframe "smoothly" to do its thing when the button is hovered over.
It works great, but when the animation restarts, I want it to freeze at the end.

I have looked at some places, but I can't find anything that solves my problem.

My code:

#en {
    display: inline-block;
    padding: 0.3em 1.2em;
    border:0.16em solid rgba(255,255,255,0);
    font-weight: 300;
    border-radius: 0em;
    border-color: #4ef18f;
    background-color: #4ef18f;
}

@keyframes smoothly {
    from {background-color: #43f18f;}
    to {background-color: #bbecd0;}
    from {border-radius: 0em;}
    to {border-radius: 4em;}
}

#en:hover {
    animation-name: smoothly;
    animation-duration: 1s;
}

Does this answer your question? [Maintaining the final state at end of a CSS3 animation](https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css3-animation) — theknightD2, Apr 12 '21 at 20:16
Have you seen [Stopping a CSS3 Animation on last frame](https://stackoverflow.com/questions/4359627/stopping-a-css3-animation-on-last-frame)? — Christian, Apr 12 '21 at 20:17
@theknightD2 this may be the answer, but how do I put this in my code? Could you help? — Bawer, Apr 12 '21 at 20:19
Personally finding why a question is bad took a while. 2 of my first questions had more than one downvote. Some tips: Search with different terms. I found a solution by searching for “How do I save the state of a css animation?". Do research on it. Look at high successful questions and see what they did to make it more successful. Good luck! — theknightD2, Apr 12 '21 at 20:27

score 1 · Accepted Answer · answered Apr 12 '21 at 20:21

1

Add animation: smoothly 1s forwards
Older browsers : -webkit-animation: smoothly 1s forwards;

answered Apr 12 '21 at 20:21

theknightD2

321
6
17

How do I freeze an animation in CSS?

1 Answers1