예
한 장소에서 다른 장소로 이동하는 무언가를 애니메이션과가 남아있다 :
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} »그것을 자신을 시도 정의 및 사용
애니메이션이 재생되지 않는 경우 애니메이션 필 모드 속성은 요소의 스타일을 지정한다 (when it is finished, or when it has a delay) .
기본적으로 CSS 애니메이션은 첫 번째 키 프레임이 될 때까지 요소에 영향을주지 않습니다 "played" , 마지막 키 프레임이 완료되면 다음 중지합니다. 애니메이션 채우기 모드 속성은이 동작을 재정의 할 수 있습니다.
| 기본값: | none |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.animationFillMode="forwards" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 -moz-, -webkit- 다음에, 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.
| 재산 | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -O- |
CSS 구문
animation-fill-mode: none|forwards|backwards|both|initial|inherit;속성 값
| 값 | 기술 |
|---|---|
| none | 기본값. 애니메이션 전 또는 후에 대상 요소에 어떤 스타일을 적용하지 않습니다 실행 |
| forwards | 애니메이션 종료 후 (determined by animation-iteration-count) , 애니메이션은 애니메이션이 끝난 시간의 속성 값을 적용합니다 |
| backwards | 애니메이션은 애니메이션 지연에 의해 정의 된 기간 동안 애니메이션의 첫 번째 반복을 시작합니다 키 프레임에 정의 된 속성 값을 적용합니다. 이러한 값 중 하나 인 키 프레임에서 (when animation-direction is "normal" or "alternate") 또는의 사람들은 키 프레임 (when animation-direction is "reverse" or "alternate-reverse") |
| both | 애니메이션은 앞뒤로 모두에 대한 규칙을 따릅니다. 즉, 양방향으로 애니메이션 속성을 확장 것입니다 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
관련 페이지
CSS3 튜토리얼 : CSS3 애니메이션
HTML DOM 참조 : animationFillMode property