Why does my CSS animation jump back at the end?

Without animation-fill-mode: forwards, the element returns to its pre-animation styles when the last iteration finishes.

CSS Studio

Interactive Learning

On this tool

animation-fill-mode stays at its default unless you set it. After the animation ends, the element snaps back to the original style unless fill-mode is forwards.

Animation

Duration is how long one cycle takes. Delay waits before the first cycle. Iteration count is how many cycles run.

What people get wrong

animation-fill-mode stays at its default unless you set it. After the animation ends, the element snaps back to the original style unless fill-mode is forwards.

Why does my CSS animation jump back at the end?: Without animation-fill-mode: forwards, the element returns to its pre-animation styles when the last iteration finishes.

Animation Properties

Duration2s

Delay0s

Easing

Iteration count

Direction

Fill mode

Fill mode applies after the animation ends. An infinite count never ends, so forwards has nothing to hold.

End State Transforms

Translate X80px

Rotate180deg

Scale1.2

Generated CSS

From the controls

Animate