예
a의 animationFillMode 속성 변경 <div> 요소를 :
document.getElementById("myDIV").style.animationFillMode = "forwards";
»그것을 자신을 시도 정의 및 사용
animationFillMode 속성은 애니메이션이 재생되지 않을 때 스타일이 요소에 대해 적용됩니다 지정합니다 (when it is finished, or when it has a "delay") .
기본적으로 CSS 애니메이션은 첫 번째 키 프레임이 될 때까지 애니메이션하는 요소에 영향을주지 않습니다 "played" 한 후 마지막 키 프레임이 완료되면 그 영향을 중지합니다. animationFillMode 속성은이 동작을 재정의 할 수 있습니다.
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
모즈 다음 숫자는 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| animationFillMode | 43.0 | 지원되지 않음 | 16.0 5.0 모즈 | 지원되지 않음 | 30.0 |
통사론
animationFillMode 속성을 반환합니다 :
object .style.animationFillMode animationFillMode 속성을 설정 :
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
속성 값
| 값 | 기술 |
|---|---|
| none | 기본값. 애니메이션은 앞이나 뒤에 대상에 어떤 스타일을 적용하지 않습니다 실행 |
| forwards | 애니메이션이 끝나면 (determined by animation-iteration-count) , 애니메이션은 애니메이션의 종료시의 속성 값을 적용 할 |
| backwards | 애니메이션은 애니메이션 지연에 의해 정의 된 기간 동안, 애니메이션의 최초 반복을 시작한다 키 프레임에 정의 된 속성 값을 적용한다. 이들 값 중 하나 인 키 프레임 (when animation-direction is "normal" or "alternate") 키 프레임 또는들 (when animationDirection is "reverse" or "alternate-reverse") |
| both | 애니메이션은 앞뒤로 모두에 대한 규칙을 따릅니다. 즉, 양방향으로 애니메이션 속성을 확장 것입니다 |
| initial | 기본값으로이 속성을 설정합니다. 초기 읽기에 대한 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
기술적 세부 사항
| 기본값: | 없음 |
|---|---|
| 반환 값 : | 요소의 애니메이션 채우기 모드 속성을 나타내는 문자열 |
| CSS 버전 | CSS3 |
관련 페이지
CSS 참조 : animation-fill-mode property
<스타일 개체