animation-fill-mode
애니메이션 실행 전후에 요소가 어떤 스타일 상태를 유지할지 결정합니다. afmf를 사용하면 애니메이션 종료 후 마지막 키프레임 상태를 유지할 수 있습니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
afmn | animation-fill-mode: none | 기본값. 애니메이션 전후 키프레임 스타일 미적용 |
afmf | animation-fill-mode: forwards | 종료 후 마지막 키프레임 상태 유지 |
afmb | animation-fill-mode: backwards | 시작 전 첫 키프레임 스타일 미리 적용 |
afmbf | animation-fill-mode: both | forwards + backwards 동시 적용 |
동작 비교
각 fill-mode 값이 애니메이션 실행 전후 요소 상태에 어떤 영향을 미치는지 비교합니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">값 | 실행 전 | 실행 후 |
|---|---|---|
afmn | Keeps original styles | Returns to original styles |
afmf | Keeps original styles | Keeps last keyframe |
afmb | Applies first keyframe | Returns to original styles |
afmbf | Applies first keyframe | Keeps last keyframe |
클래스별 상세
afmnanimation-fill-mode: none
기본값입니다. 애니메이션이 실행되지 않을 때 요소는 원래 스타일을 유지합니다. 실행 전후 키프레임 스타일이 적용되지 않습니다.
<!-- Default: keeps original styles before and after animation -->
<div class="afmn">
Returns to original state when animation ends
</div>afmfanimation-fill-mode: forwards
애니메이션 종료 후 마지막 키프레임의 스타일을 유지합니다. 가장 많이 사용되는 fill-mode이며, fade-in이나 slide-in 같은 진입 애니메이션에서 최종 상태를 유지하고 싶을 때 필수입니다.
<!-- Keeps final state after fade-in -->
<div class="afmf">
Keeps last keyframe after animation ends
</div>
<!-- Practical: entrance animation -->
<div class="o0 afmf">
Starts at opacity: 0 → animates to 1 →
afmf keeps opacity: 1
</div>가장 많이 쓰는 패턴
afmf는 요소가 애니메이션 끝난 뒤 원래 상태로 돌아가지 않도록 합니다. fade-in, slide-in 등 진입 애니메이션에 필수입니다.
afmbanimation-fill-mode: backwards
애니메이션 시작 전(animation-delay 동안) 첫 번째 키프레임의 스타일을 미리 적용합니다. delay가 있는 애니메이션에서 깜빡임을 방지할 때 유용합니다.
<!-- Applies first keyframe during delay -->
<div class="afmb">
First keyframe styles applied even during delay
</div>
<!-- Practical: prevent flicker in fade-in with delay -->
<div class="afmb">
Prevents element from appearing then disappearing during delay
</div>afmbfanimation-fill-mode: both
forwards와 backwards를 동시에 적용합니다. delay 중에는 첫 키프레임, 종료 후에는 마지막 키프레임 상태를 유지합니다.
<!-- Applies both forwards + backwards -->
<div class="afmbf">
First keyframe during delay + keeps last keyframe after end
</div>
<!-- Practical: when both delay + state retention are needed -->
<div class="o0 afmbf">
Stays transparent during delay → animates → stays opaque after end
</div>팁
delay가 있는 애니메이션에서 afmbf를 사용하면 시작 전 깜빡임 방지 + 종료 후 상태 유지를 동시에 해결할 수 있습니다.
팁 & 주의사항
forwards vs both
delay가 없다면 afmf와 afmbf는 동일하게 동작합니다. delay가 있을 때만 backwards 효과가 차이를 만듭니다.
none의 깜빡임
기본값 afmn은 애니메이션 종료 시 원래 스타일로 돌아갑니다. 진입 애니메이션에서 의도치 않은 깜빡임이 발생할 수 있으므로 afmf를 사용하세요.