We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

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
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

문법(Syntax)

값(Values)

none
애니메이션은 실행되지 않을 때 대상에 스타일을 적용하지 않습니다. 요소는 대신 적용된 다른 CSS 규칙을 사용하여 표시됩니다. 이것은 기본값입니다.
forwards
대상은 실행 된 애니메이션의 마지막 keyframe에 의해 설정된 계산 된 값을 유지합니다. 마지막 키 프레임은 animation-directionanimation-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!

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)

문서 태그 및 공헌자

이 페이지의 공헌자: JJapShe
최종 변경: JJapShe,