transition-duration 属性定义了过渡动画需要多长时间。
transition-duration 属性是 CSS3 属性之一。
可以指定一个或者多个逗号分隔的持续时间。
可以指定多个持续时间，并且这些持续时间中的每一个都将应用于由 CSS transition-property 定义的匹配属性。
此属性充当主列表，并且在持续时间少于主列表的情况下，持续时间列表会重复。
如果有更多指定的持续时间，则缩短列表。
默认值为 0s，表示过渡不会产生任何效果。
对于最大的浏览器兼容性扩展，例如 -webkit- 用于 Safari、Google Chrome 和 Opera（较新版本），-moz- 用于 Firefox，-o- 用于旧版本的 Opera 与此属性一起使用。
| 初始值 | 0s |
|---|---|
| 应用于 | 所有元素，以及 ::before 和 ::after伪元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.TransitionDuration =“3S”; |
语法
transition-duration: time | initial | inherit;
transition-duration 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 150px;
height: 100px;
background: #666;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
div:hover {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition-duration 属性示例</h2>
<div></div>
</body>
</html>
具有“时间”值的 transition-duration 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.example {
padding: 1em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
position: relative;
-webkit-transition-property: background-color, left;
-moz-transition-property: background-color, left;
-o-transition-property: background-color, left;
transition-property: background-color, left;
-webkit-transition-timing-function: linear, linear;
-moz-transition-timing-function: linear, linear;
-o-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
-webkit-transition-duration: .3s, .3s;
-moz-transition-duration: .3s, .3s;
-o-transition-duration: .3s, .3s;
transition-duration: .3s, .3s;
}
.el2 {
-webkit-transition-duration: .6s, .6s;
-moz-transition-duration: .6s, .6s;
-o-transition-duration: .6s, .6s;
transition-duration: .6s, .6s;
}
.el3 {
-webkit-transition-duration: 1s, 1s;
-moz-transition-duration: 1s, 1s;
-o-transition-duration: 1s, 1s;
transition-duration: 1s, 1s;
}
.el4 {
-webkit-transition-duration: 2s, 2s;
-moz-transition-duration: 2s, 2s;
-o-transition-duration: 2s, 2s;
transition-duration: 2s, 2s;
}
</style>
</head>
<body>
<h2>Transition-duration 属性示例</h2>
<div class="container">
<p>
<code>transition-duration: .3s, .3s;
</p>
<div class="example el1"></div>
<p>
<code>transition-duration: .6s, .6s;
</p>
<div class="example el2"></div>
<p>
<code>transition-duration: 1s, 1s;
</p>
<div class="example el3"></div>
<p>
<code>transition-duration: 2s, 2s;
</p>
<div class="example el4"></div>
</div>
</body>
</html>
CSS transition-duration 属性值说明
| 值 | 描述 |
|---|---|
| time | 指定过渡效果应完成多少秒或者千分之一。默认值为0s。 |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
日期：2020-06-02 22:14:50 来源：oir作者：oir