animation属性怎么用?

2024-01-18 10:57 小编

　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>

Tag：怎么

返回首页上一篇：调用动画animation-name属性怎么用？下一篇：CSS 定位机制

联络方式：

13363039260

微信二维码

您感兴趣的内容

13363039260

animation属性怎么用?

猜你喜欢

热门话题：

联络方式：

13363039260

邯郸做网站价格

eyoucms自增标签循环+1的三种方法

商城判断是否有参数

文章点赞链接

云优CMS如何给循环列表第一个和最后一个li加上class

客服QQ