css中的animation-direction属性怎么用

云天博客 • 09/06 19:13 • 程序猿 • 阅读 22

这篇文章将为大家详细讲解有关css中的animation-direction属性怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　CSS3animation-direction属性
　　作用：定义是否应该轮流反向播放动画。
　　语法：
　　animation-direction:normal|alternate;
　　normal：默认值。动画应该正常播放。
　　alternate：动画应该轮流反向播放。
　　说明：如果animation-direction值是”alternate”，则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。
　　注：如果把动画设置为只播放一次，则该属性没有效果。
　　CSS3animation-direction属性的使用示例
　　

　　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;}
　　}
　　
　　
　　
　　
　　
　　

关于“css中的animation-direction属性怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

相关推荐: Linux重定向方法怎么使用

这篇文章主要讲解了“Linux重定向方法怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Linux重定向方法怎么使用”吧！谈到 Linux 的重定向，就不得不提以下这3种数据流：输入信息会从 stdin …