在 CSS3 中，过渡动画的延迟时间通过 transition-delay 属性或 transition 简写属性中的第四个值来设置。它控制的是：样式变化后，过渡动画等待多久才开始执行。

✅ 一、设置延迟时间的两种方式

方法 1：使用 transition-delay 单独设置

Css深色版本.element {  transition-property: opacity;  transition-duration: 0.5s;  transition-delay: 0.3s; /* 延迟 0.3 秒后开始动画 */}

方法 2：在 transition 简写中设置（推荐）

Css深色版本.element {  transition: opacity 0.5s ease 0.3s;  /*           ↑      ↑     ↑             属性    时长   延迟 */}

✅ 推荐使用简写形式，更简洁且不易出错。

✅ 二、语法说明

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

• delay 是第四个参数

• 单位必须是 秒（s） 或 毫秒（ms）

• 例如：0.5s、1s、200ms

✅ 三、延迟时间的取值类型

✅ 四、实用示例

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

Css深色版本.btn {  background: #007bff;  transition: background 0.4s ease 0.2s; /* 延迟 0.2s */}.btn:hover {  background: #0056b3;}

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

示例 2：多个元素依次延迟出现（常用于动画序列）

Html深色版本<div class="item item1">Item 1</div><div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>

Css深色版本.item {  opacity: 0;  transform: translateY(10px);  transition: all 0.6s ease;}.item:hover {  opacity: 1;  transform: translateY(0);}/* 分别设置不同延迟，形成先后顺序 */.item1 { transition-delay: 0.1s; }.item2 { transition-delay: 0.3s; }.item3 { transition-delay: 0.5s; }

✅ 效果：鼠标悬停时，三个元素依次延迟出现，形成“逐个入场”动画。

示例 3：统一延迟所有属性

Css深色版本.card {  transition: all 0.4s ease 0.2s;}

✅ 所有可动画属性（如 width、color、transform）在变化时，都会延迟 0.2 秒后开始过渡。

✅ 五、常见问题与注意事项

✅ 六、最佳实践建议

• ✅ 微交互：按钮、图标等使用 0.1s ~ 0.3s 延迟，避免“过于灵敏”

• ✅ 引导动画：提示框、弹窗等可使用 0.5s 以上延迟，增强节奏感

• ✅ 性能考虑：优先对 transform 和 opacity 使用过渡，性能更好

✅ 总结

通过合理设置 transition-delay，你可以创建出有节奏、有层次的动画效果，让界面更生动、用户体验更流畅。