스타일 animationFillMode 속성
예시
<div> 요소의 animationFillMode 속성 변경:
document.getElementById("myDIV").style.animationFillMode = "forwards";
정의 및 사용
animationFillMode 속성은 애니메이션이 재생되고 있지 않을 때(완료될 때 또는 "지연"이 있을 때) 요소에 적용할 스타일을 지정합니다.
기본적으로 CSS 애니메이션은 첫 번째 키프레임이 "재생"될 때까지 애니메이션을 적용하는 요소에 영향을 주지 않고 마지막 키프레임이 완료되면 영향을 중지합니다. animationFillMode 속성은 이 동작을 재정의할 수 있습니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Moz 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
animationFillMode | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
통사론
animationFillMode 속성을 반환합니다.
object.style.animationFillMode
animationFillMode 속성을 설정합니다.
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
속성 값
Value | Description |
---|---|
none | Default value. The animation will not apply any styles to the target before or after it is executing |
forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
backwards | The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse") |
both | The animation will follow the rules for both forwards and backwards. That is, it will extend 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 |
기술적 세부 사항
기본값: | 없음 |
---|---|
반환 값: | 요소의 animation-fill-mode 속성을 나타내는 문자열 |
CSS 버전 | CSS3 |
관련 페이지
CSS 참조: animation-fill-mode 속성