CSS animation-fill-mode 속성

애니메이션이 끝날 때 <div> 요소가 마지막 키프레임의 스타일 값을 유지하도록 합니다.

div {
animation-fill-mode: forwards;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

속성 은 animation-fill-mode애니메이션이 재생되지 않을 때(시작 전, 종료 후 또는 둘 다) 요소의 스타일을 지정합니다.

CSS 애니메이션은 첫 번째 키프레임이 재생되기 전이나 마지막 키프레임이 재생된 후에 요소에 영향을 주지 않습니다. animation-fill-mode속성은 이 동작을 재정의할 수 있습니다 .

기본값:	없음
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS3
자바스크립트 구문:	개체 .style.animationFillMode="앞으로"

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
animation-fill-mode	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.1 12.0 -o-

Value	Description
none	Default value. Animation will not apply any styles to the element before or after it is executing
forwards	The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards	The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both	The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

애니메이션이 시작되기 전(애니메이션 지연 기간 동안) <div> 요소가 첫 번째 키프레임에 의해 설정된 스타일 값을 가져오도록 합니다.

div {
animation-fill-mode: backwards;
}

애니메이션이 시작되기 전에 <div> 요소가 첫 번째 키프레임에 의해 설정된 스타일 값을 가져오고 애니메이션이 끝날 때 마지막 키프레임의 스타일 값을 유지하도록 합니다.

div {
animation-fill-mode: both;
}