animation属性怎么用?
导读: animation-duration属性 在CSS3中,我们可以使用animation-duration属性来设置动画的持续时间,也就是完成从0%到100%所使用的总时间。animation-duration属性跟CSS3过渡中的...
animation-duration属性
在CSS3中,我们可以使用animation-duration属性来设置动画的持续时间,也就是完成从0%到100%所使用的总时间。animation-duration属性跟CSS3过渡中的transition-duration属性相似。
语法:
animation-duration:时间;
说明:
animation-duration属性取值是一个时间,单位为s(秒),可以为小数如0.5s。
举例:
CSS3animation-duration属性
@-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;
}
本文转载自中文网
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: animation属性怎么用?
本文地址: https://pptw.com/jishu/664966.html
