CSS3의 animation-direction 속성에 대한 자세한 소개
- 零下一度원래의
- 2017-05-18 14:34:432769검색
CSS3 animation-direction 속성, CSS 참조 매뉴얼 예제 애니메이션을 한 번 실행한 후 반대 방향으로 애니메이션을 실행합니다. 개체 애니메이션이 루프
인스턴스
에서 반대 방향으로 움직이는지 검색하거나 설정합니다. 먼저 애니메이션을 한 번 실행한 다음 반대 방향으로 애니메이션을 실행합니다.
!DOCTYPE html> <html> <head> <style>
p { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate;
/* Safari 和 Chrome */ -webkit-animation:myfirst 5s infinite; -webkit-animation-direction:alternate; }
@keyframes myfirst { 0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;} }
@-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
</style> </head> <body> <p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。</p> <p></p> </body> </html>브라우저 지원
Internet Explorer 10, Firefox 및 Opera는 animation-direction 속성을 지원합니다.
Safari와 Chrome은 대체 속성인 -webkit-animation-direction 속성을 지원합니다.
참고: Internet Explorer 9 이하 버전에서는 animation-direction 속성을 지원하지 않습니다.
정의 및 사용법
animation-direction 속성은 애니메이션을 역방향으로 반복하고 교체할지 여부를 정의합니다.
참고: 애니메이션이 한 번만 재생되도록 설정된 경우 이 속성은 효과가 없습니다.
CSS 구문
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inhe
[관련 추천]
1. css3 애니메이션 종료 이벤트 모니터링 예시 공유
2. 꼭 마스터해야 할 CSS3 애니메이션(애니메이션)의 8가지 속성
3. 루프 간 지연 실행을 구현하기 위한 애니메이션 속성 예제 튜토리얼
4. css3의 두 가지 일시정지 방법(전환, 애니메이션)에 대한 자세한 설명
위 내용은 CSS3의 animation-direction 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!