CSS animation-direction 속성
- 이전 페이지 애니메이션-지연
- 다음 페이지 애니메이션-지속 시간
정의와 사용법
animation-direction 애니메이션을 반복적으로 반대 방향으로 재생할 수 있는지 여부를 정의합니다.
만약 animation-direction 값이 "반복적으로", 이 경우 애니메이션은奇수 횟수(1, 3, 5 등)에서 정상적으로 재생되고, 짝수 횟수(2, 4, 6 등)에서는 반대 방향으로 재생됩니다.
비고:애니메이션을 한 번만 재생할 수 있도록 설정하면 이 속성이 효과가 없습니다.
다른 참고 사항:
CSS3 강의:CSS 애니메이션
HTML DOM 참조 가이드:animationDirection 속성
CSS 문법
animation-direction: normal|반복적으로;
| 값 | 설명 | 테스트 |
|---|---|---|
| 정상 | 기본값. 애니메이션은 정상적으로 재생되어야 합니다. | 테스트 |
| 반복적으로 | 애니메이션은 반복적으로 반대 방향으로 재생되어야 합니다. | 테스트 |
기술 세부 사항
| 기본값: | 정상 |
|---|---|
| thừa kế: | 아니요 |
| 버전: | CSS3 |
| 자바스크립트 문법: | 오브젝트.style.animationDirection="alternate" |
브라우저 지원
표에 나타난 숫자는 해당 속성을 완전히 지원하는 최초 브라우저 버전을 나타냅니다.
이 -webkit-、-moz- 또는 -o-로 시작하는 숫자는 접두사를 사용하는 최초 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
| 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
- 이전 페이지 애니메이션-지연
- 다음 페이지 애니메이션-지속 시간
