这篇文章将为大家详细讲解有关css中的animation-direction属性怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
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>
关于“css中的animation-direction属性怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
