How to Stop on the Last Frame When a CSS Animation Ends?

Specifying animation-fill-mode property value as forwards will ensure that the target element retains the computed values set by the last keyframe of the CSS animation. For example:

@keyframes bgAnim {
    from { background-color: gainsboro; }
    to { background-color: aquamarine; }
}

div {
    width: 100px;
    height: 100px;
    background-color: gainsboro;
    animation-name: bgAnim;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

For this to work, you must, of course, have animation keyframes defined for both the start (i.e. the from or 0% keyframe) and the end keyframes (i.e. the to or 100% keyframe).

Please be aware of the fact that when using animation-fill-mode: forwards, what the "last keyframe" refers to depends on the value of animation-direction and animation-iteration-count. Depending on these, the animation may stop at the end frame, or the start frame.

When Does the Animation Stop at the End Frame with animation-fill-mode: forwards?

The following table shows when the last keyframe is going to be the ending frame (i.e. the frame defined at to or 100%):

animation-direction	animation-iteration-count
normal	any number
alternate	odd number
alternate-reverse	even number

When Does the Animation Stop at the Start Frame with animation-fill-mode: forwards?

The following table shows when the last keyframe is going to be the same as the starting frame (i.e. the frame defined at from or 0%):

animation-direction	animation-iteration-count
reverse	any number
alternate	even number
alternate-reverse	odd number