animation-fill-mode CSS Property

The animation-fill-mode property defines which keyframe values apply to the element outside the execution time — before (delay) and after. Initial value is none.

.box { animation-fill-mode: forwards; }

.intro { animation: fade-in 1s ease 0.5s both; }

noneThe default value. No value applied outside execution.

forwardsRetains the ending keyframe values after the animation ends.

backwardsApplies the starting value during delay (before the animation actually starts).

bothBoth forwards and backwards.

CSS Animations Level 1

Editor's Draft

W3C MDN

hover mouse to see

Show all code

Edit CSS online

The plugin that remembers hundreds of CSS items for you

Every CSS property — in a live demonstration

The bilingual CSS reference

previous next