在css的过渡动画体系中，transition-delay是用来控制过渡效果开始执行前的等待时长的属性，它可以让元素的状态变化不是立刻触发动画，而是在指定的时间之后才开始执行过渡，从而实现更丰富的交互效果。
transition-delay基础语法
transition-delay的属性值是一个时间数值，支持两种常用的时间单位：
- s：秒，1s代表1秒
- ms：毫秒，1000ms等于1s
它的默认值是0s，也就是不延迟，过渡效果会在属性变化后立刻执行。数值可以是正数，也可以是负数，正数表示等待对应时间后开始过渡，负数表示过渡效果已经执行了对应时长，会从中间状态开始过渡。
单独设置transition-delay
我们可以直接给元素单独设置transition-delay属性，搭配transition-property和transition-duration来实现基础的延迟过渡效果。
下面是一个简单的示例，当鼠标悬浮到盒子上时，盒子的宽度会在等待1秒后再开始过渡到300px，过渡过程持续2秒：
/* 基础样式 */
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 设置过渡属性为宽度，过渡时长2秒，延迟1秒 */
transition-property: width;
transition-duration: 2s;
transition-delay: 1s;
}
/* 悬浮状态 */
.box:hover {
width: 300px;
}
通过transition复合属性设置
transition是过渡相关属性的复合属性，它的语法格式为：
transition: property duration timing-function delay;
其中delay是第四个参数，我们可以在使用复合属性时直接设置延迟时间，不需要单独声明transition-delay。上面的示例用复合属性改写后如下：
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 复合属性设置：宽度 过渡2秒 匀速 延迟1秒 */
transition: width 2s linear 1s;
}
.box:hover {
width: 300px;
}
多属性设置不同延迟
如果元素有多个属性需要设置过渡，并且每个属性的延迟时间不同，我们可以用逗号分隔多组过渡配置，也可以给transition-delay设置多个值对应不同的属性。
下面的示例中，盒子悬浮时宽度和背景色都会变化，宽度延迟1秒，背景色延迟2秒：
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 方式1：逗号分隔多组过渡配置 */
transition: width 2s linear 1s, background-color 2s linear 2s;
}
/* 方式2：分别设置属性和延迟 */
.box {
width: 100px;
height: 100px;
background-color: #409eff;
transition-property: width, background-color;
transition-duration: 2s, 2s;
transition-delay: 1s, 2s;
}
.box:hover {
width: 300px;
background-color: #f56c6c;
}
注意事项
- transition-delay的时间值如果省略单位，浏览器会默认按照秒处理，但是不建议省略单位，避免兼容性问题
- 当transition-delay设置为负数时，过渡效果会从已经执行了对应时长的状态开始，比如设置-1s，过渡时长2s，那么元素会直接从过渡进行到1秒的状态开始，剩下的1秒过渡会正常执行
- 如果只需要设置延迟，不需要设置过渡时间函数，可以省略timing-function参数，复合属性中直接写property duration delay即可
transition-delay只对过渡效果生效，对animation动画不生效，如果需要控制animation的延迟，需要使用animation-delay属性。
transition-delaycss_transitioncss动画延迟过渡效果修改时间：2026-07-01 17:27:26