CSS3animation-direction属性
作用：定义是否应该轮流反向播放动画。
语法：
animation-direction:normal|alternate;
normal：默认值。动画应该正常播放。
alternate：动画应该轮流反向播放。
说明：如果animation-direction值是"alternate"，则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。
注：如果把动画设置为只播放一次，则该属性没有效果。
CSS3animation-direction属性的使用示例
<!DOCTYPEhtml>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst5sinfinite;
animation-direction:alternate;
/*SafariandChrome*/
-webkit-animation:myfirst5sinfinite;
-webkit-animation-direction:alternate;
}
@keyframesmyfirst
{
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-keyframesmyfirst/*SafariandChrome*/
{
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>
<div></div>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56266.shtml
