在 CSS3 中，可以通过 transition 属性的第四个参数——延迟时间（delay），来设置过渡动画的延迟执行效果。也就是说，样式改变后，过渡不会立即开始，而是等待指定时间后再启动。

一、语法结构

Css深色版本transition: property duration timing-function delay;

其中：

• delay：指定过渡开始前的等待时间，单位为秒（s）或毫秒（ms）。

✅ 注意：delay 可以为 0、正数或负数（负数表示动画提前开始）。

二、设置延迟的几种方式

1. 单个属性延迟

Css深色版本.box {  transition: width 0.5s ease 0.3s;}

• 含义：width 属性变化时，等待 0.3秒 后，再用 0.5 秒以 ease 效果过渡。

2. 多个属性分别设置延迟

Css深色版本.box {  transition: 
    width 0.5s ease 0.2s,    opacity 0.3s linear 0.5s;}

• width：0.2s 后开始过渡

• opacity：0.5s 后开始过渡

3. 使用 all 并设置统一延迟

Css深色版本.box {  transition: all 0.4s ease 0.1s;}

• 所有可动画属性在变化时，统一延迟 0.1 秒后开始过渡。

三、实用示例：延迟过渡效果

示例 1：按钮悬停后延迟变色

Html深色版本<button class="btn">延迟变色</button>

Css深色版本.btn {  background-color: #007bff;  color: white;  padding: 10px 20px;  border: none;  border-radius: 5px;  transition: background-color 0.3s ease 0.2s; /* 延迟0.2秒 */}.btn:hover {  background-color: #0056b3;}

✅ 效果：鼠标悬停后，等待0.2秒，按钮颜色才开始渐变。

示例 2：卡片元素依次延迟出现（配合 transform 和 opacity）

Html深色版本<div class="card card1">卡片1</div><div class="card card2">卡片2</div>
<div class="card card3">卡片3</div>

Css深色版本.card {  opacity: 0;  transform: translateY(20px);  transition: all 0.6s ease;}.card:hover {  opacity: 1;  transform: translateY(0);}/* 设置不同延迟，实现逐个出现 */.card1 { transition-delay: 0.1s; }.card2 { transition-delay: 0.3s; }.card3 { transition-delay: 0.5s; }

✅ 效果：当鼠标悬停时，三张卡片依次延迟出现，形成渐进动画效果。

示例 3：延迟 + 负延迟（提前开始）

Css深色版本.box {  transition: transform 1s ease -0.3s;}

• 负延迟 -0.3s 表示动画在触发时提前0.3秒开始，常用于衔接多个动画。

四、注意事项

五、JavaScript 控制延迟（可选）

你也可以通过 JS 动态设置延迟：

Javascript深色版本const element = document.querySelector('.box');element.style.transition = 'opacity 0.5s ease 0.4s'; // 设置延迟0.4秒element.style.opacity = '0';

总结

通过合理使用 transition-delay，你可以创建出节奏感强、层次分明的动画效果，提升界面的视觉体验。