CSS transition-delay 属性

CSS transition-delay 语法

在 CSS 中，transition-delay 属性用于定义过渡效果的延迟时间，也就是延迟多少时间才开始动画。

语法：

transition-delay: 时间;

说明：

transition-delay 的取值是一个时间值，单位为 s（秒）或 ms（毫秒），也可以取小数，默认值为 0。也就是说，如果没有显式定义 transition-delay 时，过渡效果是没有延迟时间的。

如果你在 transition-property 中定义了多个属性，也可以为每个属性设置不同的延迟时间，比如：

transition-property: width, height;
transition-delay: 0.3s, 0.8s;

如果延迟值的数量少于属性数量，多余的属性将使用默认值 0s。如果延迟值的数量多于属性数量，多余的延迟值将被忽略。

transition-delay 也可以设置为负值，表示动画会 “提前” 开始。比如下面代码表示动画一开始就会从动画的第 0.5 秒处开始播放，而不是从头播放。

transition-duration: 1s;
transition-delay: -0.5s;

提示: transition-delay 属性适用于所有元素，包括伪元素（如 ::before, ::after）。

CSS transition-delay 摘要

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

CSS transition-delay 示例

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

示例：transition-delay 基本用法

运行代码

<!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: 2s;
            cursor: pointer;
        }
        div:hover {
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，效果如下图 1 所示。当鼠标移到 div 元素上后，过了 2 秒才会出现过渡动画，最终效果如下图 2 所示。

transition-delay 基本用法1

transition-delay 基本用法2

分析：

transition-delay: 2s; 表示从鼠标移动到 div 元素上的那一瞬间开始计时，过了 2 秒钟后才会开始呈现过渡效果，这就是所谓的延迟时间。

需要注意的是，当鼠标移出 div 元素的一瞬间开始计时，过渡效果同样也会延迟 2 秒钟才会开始恢复。

transition 是一个复合属性

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

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