動畫填充模式animation-fill-mode

Setting how a CSS animation applies styles to its target before and after its execution.

Overview

Examples

Keep the final keyframe

Use animation-fill-mode:forwards when the element should keep the values from the final keyframe after the animation completes.

<div class="animation-name:fade animation-duration:300ms animation-fill-mode:forwards">    Remains visible</div>

@layer utilities {    .animation-fill-mode\:forwards {        animation-fill-mode: forwards    }}

Apply both before and after states

Use animation-fill-mode:both when the element should use the first keyframe during a positive delay and keep the final keyframe after completion.

<div class="animation-name:fade animation-delay:120ms animation-duration:300ms animation-fill-mode:both">    Delayed entrance</div>

Reset fill behavior

Use animation-fill-mode:none when the element should return to its ordinary styles before and after animation.

<div class="animation-fill-mode:none">    Uses base styles outside the animation</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="animation-fill-mode:both:hover animation-fill-mode:none@sm animation-fill-mode:none@print">...</div>