css中的animation属性怎么用

这篇文章给大家分享的是有关css中的animation属性怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

　　animation-duration属性

　　在CSS3中，我们可以使用animation-duration属性来设置动画的持续时间，也就是完成从0%到100%所使用的总时间。animation-duration属性跟CSS3过渡中的transition-duration属性相似。

　　语法：

　　animation-duration:时间；

　　说明：

　　animation-duration属性取值是一个时间，单位为s（秒），可以为小数如0.5s。

　　举例：

　　

　　@-webkit-keyframesmytranslate

　　{

　　0%{}

　　100%{-webkit-transform:translateX(100px);}

　　}

　　div:not(#container)

　　{

　　width:40px;

　　height:40px;

　　border-radius:20px;

　　background-color:red;

　　-webkit-animation-name:mytranslate;

　　-webkit-animation-timing-function:linear;

　　}

　　#container

　　{

　　display:inline-block;

　　width:140px;

　　border:1pxsolidsilver;

　　}

　　#div1{-webkit-animation-duration:2s;margin-bottom:10px;}

　　#div2{-webkit-animation-duration:4s;}