CSS3 动画方向
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>
以上代码可以分别设置两个动画一个是两个方向交替运行,一个只能够以正常方向运行。