CSS transition-duration 属性

CSS transition-duration 语法

在 CSS 中，transition-duration 属性用于定义过渡效果的 “持续时间”。

语法：

transition-duration: 时间;

说明：

transition-duration 的取值是一个时间值，单位为 s（秒）或 ms（毫秒），也可以取小数。比如 transition-duration: 0.5s，表示持续时间为 0.5s。

如果 transition-duration 提供了多个时间值，它们会依次对应 transition-property 中列出的属性。例如，transition-property: width, height; transition-duration: 0.3s, 0.8s; 表示 width 的过渡持续 0.3 秒，而 height 的过渡持续 0.8 秒。

如果时间值的数量少于属性数量，浏览器会 “循环重复” 前面的时间值来补足。例如：transition-property: A, B, C; 且 transition-duration: 2s, 1s;，那么 C 的过渡时间将是 2s（循环使用第一个值）

注意:

transition-duration 属性适用于所有元素。
transition-duration 不能为负值。如果设置为负值，浏览器会将其视为无效，不会产生过渡效果。

CSS transition-duration 摘要

属于	CSS 过渡
使用频率	中
是否继承	否
默认值	0s
兼容性	查看
官方文档	查看
MDN	查看

CSS transition-duration 示例

接下来，我们通过一个简单的例子来讲解一下 transition-duration 属性是如何使用的。

示例：transition-duration 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color:hotpink;
            transition-property: border-radius;
            transition-duration: 0.5s;
            transition-timing-function: linear;
            transition-delay: 0;
            cursor: pointer;
        }
        div:hover {
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，效果如下图 1 所示。当鼠标移到 div 元素上时，会慢慢过渡到如下图 2 所示的效果。

transition-duration 基本用法1

transition-duration 基本用法2

分析：

上面使用 transition-duration 属性指定了过渡效果的持续时间为 0.5 秒。当鼠标移动到元素上时，元素的 border-radius 在 0.5 秒内从 0 过渡到 50px。当然，小伙伴们也可以把 0.5s 改为 1s、2s 等，然后看看实际效果如何。

transition 是一个复合属性

在 CSS 中，transition 是一个复合属性，它包含以下子属性（如下表所示）。

transition 的子属性
子属性	说明
transition-property	操作的是哪个属性
transition-duration	过渡的 “持续时间”
transition-timing-function	过渡的 “速度曲线”
transition-delay	过渡的 “延迟时间”