CSS3의 animation-direction 속성에 대한 자세한 소개-CSS 튜토리얼-php.cn

CSS3의 animation-direction 속성에 대한 자세한 소개

零下一度

풀어 주다： 2017-05-18 14:34:43

원래의

2858명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!