animation属性怎么用?

　　animation-duration属性

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

　　语法：

　　animation-duration:时间；

　　说明：

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

　　举例：

　　<!DOCTYPEhtml>

　　<htmlxmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<title>CSS3animation-duration属性</title>

　　<styletype="text/css">

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

　　</style>

　　</head>

　　<body>

　　<divid="container">

　　<divid="div1"></div>

　　<divid="div2"></div>

　　</div>

　　</body>

　　</html>

　　效果如下：

　　11-4-1.png

　　分析：

　　这个例子中，我们设置#div1的元素动画持续时间为2s，而设置#div2的元素动画持续时间为4s。从在线测试中，我们可以明显看出效果。

　　这里说一句，CSS3动画很多时候都是跟CSS3变形结合起来，然后实现绚丽复杂的动画效果。

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56552.shtml