transition-delay是CSS过渡模块中的核心属性之一，主要作用是定义元素过渡效果开始执行前的等待时间，让开发者可以灵活控制动画的触发节奏，避免所有过渡效果同时启动导致的视觉混乱。
transition-delay基本语法
该属性的语法格式非常简单，支持单个时间值或者多个时间值（对应多个过渡属性）的配置，具体规则如下：
/* 单个值：所有过渡属性都延迟2秒执行 */ transition-delay: 2s; /* 多个值：分别对应不同过渡属性的延迟时间 */ /* 第一个值对应第一个transition-property，第二个值对应第二个，以此类推 */ transition-delay: 1s, 0.5s, 0s;
取值说明
transition-delay的取值只有时间类型，具体说明如下：
- 时间值：可以是秒（s）或者毫秒（ms），1s等于1000ms，取值可以为正数、0或者负数。
- 正数：表示过渡效果在触发后等待对应时长再开始执行。
- 0：默认值，过渡效果触发后立即执行，没有延迟。
- 负数：表示过渡效果立即执行，但会从已经进行的对应时长的位置开始，相当于跳过了前面的部分动画。
单独使用transition-delay
我们可以单独设置transition-delay属性，配合默认的过渡属性配置实现简单的延迟效果，示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 设置宽度变化的过渡时长为1秒，延迟2秒执行 */
transition-property: width;
transition-duration: 1s;
transition-delay: 2s;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
上述代码中，当鼠标悬停在box元素上时，宽度不会立即开始变化，而是等待2秒后才会执行1秒的宽度过渡动画。
配合transition简写属性使用
实际开发中更常用的是transition简写属性，transition-delay在简写中的顺序是第三个位置，语法为：transition: property duration delay timing-function;，示例如下：
/* 元素的所有过渡属性都延迟0.5秒执行，过渡时长1秒，缓动函数为ease */ transition: all 1s 0.5s ease; /* 分别设置不同属性的延迟时间 */ /* 宽度过渡延迟1s，背景色过渡延迟0.3s，缓动函数默认ease */ transition: width 0.8s 1s, background-color 0.6s 0.3s;
负数取值的实际应用
transition-delay的负数取值可以实现动画跳过的效果，比如一个3秒的过渡动画，设置delay为-1s，那么动画会直接从第1秒的位置开始执行，总执行时长还是3秒，相当于跳过了前1秒的内容，示例如下：
.element {
opacity: 0;
transition: opacity 3s -1s;
}
.element.show {
opacity: 1;
}
当给元素添加show类时，opacity会从0.33左右的位置开始过渡到1，而不是从0开始。
注意事项
- 如果设置的transition-delay值没有单位，浏览器会忽略该属性配置。
- 当使用多个延迟时间时，如果数量少于过渡属性的数量，浏览器会循环使用已有的延迟值。
- transition-delay只对过渡动画生效，对CSS动画（animation）没有作用，animation的延迟需要使用animation-delay属性控制。
transition-delayCSS_transition过渡动画前端样式修改时间：2026-07-03 21:45:32