您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 transition-duration

2018-9-6 00:55| 作者: admin| 查看: 816| 评论: 0|来自: 蚂蚁部落

transition-duration属性用来设置动画过渡的持续时间。

更多关于transition内容可以参阅CSS3 transition一章节。

语法结构:

[CSS] 纯文本查看 复制代码
transition-duration:<time>[ ,<time> ]*

参数解析:

(1).<time>:设置过渡效果的时间。

特别说明:设置多个时间用逗号分隔,和transition-property设置的属性一一对应。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#ant{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  transition-duration:2s;
}
#ant:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

将过渡时间设置为2秒,也就是说宽度和高度的过渡效果在2秒内完成。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#ant{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  transition-duration:2s,6s;
}
#ant:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

一次性设置多个过渡时间,和过渡属性是一一对应的。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部