animation-fill-mode

animation-fill-mode CSS 속성은 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을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.

초기값	`none`
적용대상	all elements, `::before` and `::after` pseudo-elements
상속	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

문법(Syntax)

값(Values)

none

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

forwards

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

`animation-direction`	`animation-iteration-count`	last keyframe encountered
`normal`	even or odd	`100%` or `to`
`reverse`	even or odd	`0%` or `from`
`alternate`	even	`0%` or `from`
`alternate`	odd	`100%` or `to`
`alternate-reverse`	even	`100%` or `to`
`alternate-reverse`	odd	`0%` or `from`

backwards

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

`animation-direction`	first relevant keyframe
`normal` or `alternate`	`0%` or `from`
`reverse` or `alternate-reverse`	`100%` or `to`

both

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

노트: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 animation-name 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 여러 애니메이션 속성 값 설정을 참조하십시오.

Formal syntax

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

예제(Examples)

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

HTML

<p>회색 박스 위에 마우스를 올려보세요!</p>
<div class="demo">
  <div class="grows">이 글씨는 커집니다.</div>
  <div class="growsandstays">이 글씨는 커지며, 커진 상태를 유지합니다.</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를 보십시오.

명세(Specifications)

Specification	Status	Comment
CSS Animations The definition of 'animation-fill-mode' in that specification.	Working Draft	Initial definition.

브라우저 호환성(Browser compatibility)

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit 43.0	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)^[1]	10	12-o 12.10	4.0-webkit

Feature	Android	Chrome	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	?	(Yes)-webkit (Yes)	?	?	?	?	?

[1] Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) 은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) 이후 기본 설정은 true로 기본 설정됩니다.

같이 보기(See also)

Using CSS animations
JavaScript AnimationEvent API