AAtomic CSS

animation-fill-mode

애니메이션 실행 전후에 요소가 어떤 스타일 상태를 유지할지 결정합니다. afmf를 사용하면 애니메이션 종료 후 마지막 키프레임 상태를 유지할 수 있습니다.

클래스 목록

클래스CSS설명
afmnanimation-fill-mode: none기본값. 애니메이션 전후 키프레임 스타일 미적용
afmfanimation-fill-mode: forwards종료 후 마지막 키프레임 상태 유지
afmbanimation-fill-mode: backwards시작 전 첫 키프레임 스타일 미리 적용
afmbfanimation-fill-mode: bothforwards + backwards 동시 적용

동작 비교

각 fill-mode 값이 애니메이션 실행 전후 요소 상태에 어떤 영향을 미치는지 비교합니다.

값실행 전실행 후
afmn원래 스타일 유지원래 스타일로 복귀
afmf원래 스타일 유지마지막 키프레임 유지
afmb첫 키프레임 적용원래 스타일로 복귀
afmbf첫 키프레임 적용마지막 키프레임 유지

클래스별 상세

afmnanimation-fill-mode: none

기본값입니다. 애니메이션이 실행되지 않을 때 요소는 원래 스타일을 유지합니다. 실행 전후 키프레임 스타일이 적용되지 않습니다.

<!-- 기본값: 애니메이션 전후 원래 스타일 유지 -->
<div class="afmn">
  애니메이션 종료 시 원래 상태로 돌아감
</div>

afmfanimation-fill-mode: forwards

애니메이션 종료 후 마지막 키프레임의 스타일을 유지합니다. 가장 많이 사용되는 fill-mode이며, fade-in이나 slide-in 같은 진입 애니메이션에서 최종 상태를 유지하고 싶을 때 필수입니다.

<!-- fade-in 후 최종 상태 유지 -->
<div class="afmf">
  애니메이션 종료 후 마지막 키프레임 유지
</div>

<!-- 실전: 진입 애니메이션 -->
<div class="o0 afmf">
  opacity: 0에서 시작 → 애니메이션으로 1까지 →
  afmf 덕분에 opacity: 1 유지
</div>

가장 많이 쓰는 패턴

afmf는 요소가 애니메이션 끝난 뒤 원래 상태로 돌아가지 않도록 합니다. fade-in, slide-in 등 진입 애니메이션에 필수입니다.

afmbanimation-fill-mode: backwards

애니메이션 시작 전(animation-delay 동안) 첫 번째 키프레임의 스타일을 미리 적용합니다. delay가 있는 애니메이션에서 깜빡임을 방지할 때 유용합니다.

<!-- delay 동안 첫 키프레임 미리 적용 -->
<div class="afmb">
  delay 기간에도 첫 키프레임 스타일이 적용됨
</div>

<!-- 실전: delay가 있는 fade-in에서 깜빡임 방지 -->
<div class="afmb">
  delay 중 요소가 보였다 사라지는 현상 방지
</div>

afmbfanimation-fill-mode: both

forwards와 backwards를 동시에 적용합니다. delay 중에는 첫 키프레임, 종료 후에는 마지막 키프레임 상태를 유지합니다.

<!-- forwards + backwards 동시 적용 -->
<div class="afmbf">
  delay 중 첫 키프레임 + 종료 후 마지막 키프레임 유지
</div>

<!-- 실전: delay + 상태 유지가 모두 필요할 때 -->
<div class="o0 afmbf">
  delay 동안 투명 유지 → 애니메이션 → 종료 후 불투명 유지
</div>

팁

delay가 있는 애니메이션에서 afmbf를 사용하면 시작 전 깜빡임 방지 + 종료 후 상태 유지를 동시에 해결할 수 있습니다.

팁 & 주의사항

forwards vs both

delay가 없다면 afmf와 afmbf는 동일하게 동작합니다. delay가 있을 때만 backwards 효과가 차이를 만듭니다.

none의 깜빡임

기본값 afmn은 애니메이션 종료 시 원래 스타일로 돌아갑니다. 진입 애니메이션에서 의도치 않은 깜빡임이 발생할 수 있으므로 afmf를 사용하세요.

animation-play-stateanimation-directionanimation-iteration-count