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