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

Learn how to stop a CSS animation on the last keyframe

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:

animation-fill-mode: none
animation-fill-mode: forwards
@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

Hope you found this post useful. It was published . Please show your love and support by sharing this post.