CSS3的animation-direction屬性詳解:
此屬性用於設定animation動畫是否可以反向運動。
更多關於animation屬性內容可以參考CSS3的animation屬性用法詳解一章節。
語法結構:
animation-direction:normal | alternate [ , normal | alternate ]*
參數解析:
1.normal:動畫正常方向運作。
2.alternate:正常方向與反方向交替。
特別說明:
如果提供多個屬性值,以逗號進行分隔。
對應的腳本特性為animationDirection。
程式碼實例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> div{ width:100px; height:100px; background:red; position:relative; animation:theanimation 5s infinite; -webkit-animation:theanimation 5s infinite; -moz-animation:theanimation 5s infinite; -o-animation:theanimation 5s infinite; -ms-animation:theanimation 5s infinite; animation-direction:alternate; -webkit-animation-direction:alternate; -moz-animation-direction:alternate; -o-animation-direction:alternate; -ms-animation-direction:alternate; } @keyframes theanimation{ 0% {left:0px;} 100% {left:200px;} } @-webkit-keyframes theanimation{ 0% {left:0px;} 100% {left:200px;} } @-moz-keyframes theanimation{ 0% {left:0px;} 100% {left:200px;} } @-o-keyframes theanimation{ 0% {left:0px;} 100% {left:200px;} } @-ms-keyframes theanimation{ 0% {left:0px;} 100% {left:200px;} } </style> </head> <body> <div></div> </body> </html>
以上程式碼可以設定動畫正常方向與反方向交替移動。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> div{ width:100px; height:100px; background:red; position:relative; animation:firstanimation 5s infinite,secondanimation 2s infinite; -webkit-animation:firstanimation 5s infinite,secondanimation 2s infinite; -moz-animation:firstanimation 5s infinite,secondanimation 2s infinite; -o-animation:firstanimation 5s infinite,secondanimation 2s infinite; -ms-animation:firstanimation 5s infinite,secondanimation 2s infinite; animation-direction:alternate,normal; -webkit-animation-direction:alternate,normal; -moz-animation-direction:alternate,normal; -o-animation-direction:alternate,normal; -ms-animation-direction:alternate,normal; } @keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-webkit-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-moz-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-o-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-ms-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-webkit-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-moz-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-o-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-ms-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } </style> </head> <body> <div></div> </body> </html>
以上程式碼可以分別設定兩個動畫一個是兩個方向交替運行,一個只能夠以正常方向運行。