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 |
Computed value | as specified |
Animation type | discrete |
문법(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
- 애니메이션은 앞뒤 양쪽 모두의 규칙을 따르므로 애니메이션 속성이 양방향으로 확장됩니다.
노트: 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 Level 1 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!
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