animation-fill-modeCSS 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.

/* Single animation */animation-fill-mode: none;animation-fill-mode: forwards;animation-fill-mode: backwards;animation-fill-mode: both;/* Multiple animations */animation-fill-mode: none, backwards;animation-fill-mode: both, forwards, none;

축약 속성animation을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.

문법(Syntax)

값(Values)

none

애니메이션은 실행되지 않을 때 대상에 스타일을 적용하지 않습니다. 요소는 대신 적용된 다른 CSS 규칙을 사용하여 표시됩니다. 이것은 기본값입니다.

forwards

대상은 실행 된 애니메이션의 마지막keyframe에 의해 설정된 계산 된 값을 유지합니다. 마지막 키 프레임은animation-direction및animation-iteration-count의 값에 따라 다릅니다.

animation-direction	animation-iteration-count	last keyframe encountered
normal	even or odd	100% orto
reverse	even or odd	0% orfrom
alternate	even	0% orfrom
alternate	odd	100% orto
alternate-reverse	even	100% orto
alternate-reverse	odd	0% orfrom

backwards

애니메이션은 대상에 적용되는 즉시 첫 번째 관련keyframe 에 정의 된 값을 적용하고animation-delay 기간 동안 이 값을 유지합니다. 첫 번째 관련 키프레임은animation-direction의 값에 따라 다릅니다.

animation-direction	first relevant keyframe
normal oralternate	0% orfrom
reverse oralternate-reverse	100% orto

both

애니메이션은 앞뒤 양쪽 모두의 규칙을 따르므로 애니메이션 속성이 양방향으로 확장됩니다.

Formal syntax

animation-fill-mode =
<single-animation-fill-mode>#

<single-animation-fill-mode> =
none|
forwards|
backwards|
both

예제(Examples)

다음 예제에서 animation-fill-mode의 효과를 볼 수 있습니다. 무한 시간 동안 실행되는 애니메이션의 경우 원래 상태 (기본값)로 되돌리기보다는 최종 상태로 유지하는 방법을 보여줍니다.

HTML

<p>회색 박스 위에 마우스를 올려보세요!</p><div>  <div>이 글씨는 커집니다.</div>  <div>이 글씨는 커지며, 커진 상태를 유지합니다.</div></div>

CSS

.demo {  border-top: 100px solid #ccc;  height: 300px;}@keyframes grow {  0% {    font-size: 0;  }  100% {    font-size: 40px;  }}.demo:hover .grows {  animation-name: grow;  animation-duration: 3s;}.demo:hover .growsandstays {  animation-name: grow;  animation-duration: 3s;  animation-fill-mode: forwards;}

자세한 예제는CSS animations를 보십시오.

명세

브라우저 호환성(Browser compatibility)

같이 보기(See also)

• Using CSS animations
• JavaScriptAnimationEvent API