CSS animation-fill-mode 속성
- 이전 페이지 애니메이션 지속 시간
- 다음 페이지 애니메이션 반복 횟수
정의와 사용법
animation-fill-mode 속성은 애니메이션이 재생되기 전이나 후에 애니메이션 효과가 보이는지를 정의합니다.
비고:속성 값은 쉼표로 구분된 하나 또는 여러 가지 채우기 모드 키워드입니다.
다른 것을 참조하십시오:
CSS3 강의:CSS 애니메이션
HTML DOM 참조 설명서:animationFillMode 속성
예제
h1 요소에 채우기 모드를 지정합니다:
h1
{
animation-fill-mode: forwards;
}
CSS 문법
animation-fill-mode : none | forwards | backwards | both;
| 값 | 설명 |
|---|---|
| none | 기본 동작을 변경하지 않습니다. |
| forwards | 애니메이션이 완료된 후, 마지막 속성 값(마지막 키 프레임에서 정의)을 유지합니다. |
| backwards | animation-delay가 지정한 시간 동안, 애니메이션이 표시되기 전에, 시작 속성 값(첫 번째 키 프레임에서 정의)을 적용합니다. |
| both | 애니메이션의 앞쪽과 뒤쪽 채우기 모드가 모두 적용됩니다. |
기술 세부 사항
| 기본 값: | none |
|---|---|
| 상속성: | no |
| 버전: | CSS3 |
| JavaScript 문법: | object.style.animationFillMode=none |
브라우저 지원
표의 숫자는 해당 속성을 완전히 지원하는 최초 브라우저 버전을 나타냅니다.
가 -webkit-、-moz- 또는 -o- 프리픽스를 사용하는 숫자는 최초 버전의 사용을 나타냅니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 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- |
- 이전 페이지 애니메이션 지속 시간
- 다음 페이지 애니메이션 반복 횟수
