Fill mode
The rule that decides whether an animation's first or last pose sticks before it starts or after it ends.
See it
What it is
Fill mode decides whether CSS keyframe styles apply before and after the animation's active run. 'backwards' applies the starting keyframe during a delay, 'forwards' preserves the ending keyframe after the last iteration, and 'both' does both. The default, 'none', applies keyframes only while the animation is playing.
Reach for 'backwards' when a delayed entrance must stay in its hidden starting pose instead of flashing visible first. Use 'forwards' for a finite animation that must hold its result, such as a progress bar that fills and stays full.
Gotcha: fill mode does not rewrite the element's underlying CSS. Remove or replace the animation and the element can snap back to its original styles. For durable UI state, make the real class or style match the final pose, then treat 'forwards' as visual continuity rather than state management. It has no after effect on an infinite animation because that animation never ends.
Ask AI for it
Build this delayed entrance with CSS 'animation-fill-mode: both'. In the @keyframes block, start at 'opacity: 0; transform: translateY(8px)' and finish at 'opacity: 1; transform: translateY(0)'. Use 'animation-delay: 200ms' so 'backwards' fill prevents a flash before playback, then add an 'is-visible' class whose underlying opacity and transform match the final keyframe so removing the animation cannot snap the element back.