animation属性怎么用?animation属性详解

互联网 18-11-20

本篇文章给大家带来的内容是关于animation属性怎么用?animation属性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

animation-duration属性

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

语法：

animation-duration:时间；

说明：

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

举例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS3 animation-duration属性</title>     <style type="text/css">         @-webkit-keyframes mytranslate         {             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:1px solid silver;         }         #div1{-webkit-animation-duration:2s;margin-bottom:10px;}         #div2{-webkit-animation-duration:4s;}     </style> </head> <body>     <div id="container">         <div id="div1"></div>         <div id="div2"></div>     </div> </body> </html>

效果如下：