transition-duration 控制过渡持续时间，transition-delay 设置延迟；两者结合可实现流畅自然的CSS动效，如按钮悬停、菜单展开等场景中的平滑变化。
在CSS中实现平滑的视觉效果，transition-duration 和 transition-delay 是两个关键属性。它们控制动画的持续时间和延迟启动时间，合理搭配能让界面交互更自然。
transition-duration：定义过渡持续时间
这个属性决定属性变化过程持续多久。默认值是0，意味着没有过渡效果，变化立即完成。
你可以设置具体的时间（单位为秒 s 或毫秒 ms）：
- transition-duration: 0.5s; — 半秒完成过渡
- transition-duration: 200ms; — 200毫秒完成
- 可以为多个属性分别指定时间，例如：transition-duration: 0.3s, 0.6s;
常见用法是在:hover等状态中改变样式，并通过duration让变化更柔和：
立即学习“前端免费学习笔记（深入）”；
.button {
background-color: #007bff;
transition-property: background-color, transform;
transition-duration: 0.3s;
}
.button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
transition-delay：设置过渡开始前的等待时间
这个属性控制从触发条件（如鼠标悬停）到实际开始动画之间的延迟。
- transition-delay: 0.2s; — 延迟200毫秒再开始动画
- transition-delay: 1s; — 等待1秒后才开始过渡
- 支持负值，比如 -0.5s 表示动画从中间开始播放
适合用于创建有节奏感的连续动画，比如多个元素依次响应：
.box1 { transition-delay: 0.1s; }
.box2 { transition-delay: 0.3s; }
.box3 { transition-delay: 0.5s; }
组合使用技巧
将 duration 和 delay 结合，能做出更有层次的动效。
- 短 duration + 零 delay：快速反馈，适合按钮点击
- 中等 duration + 小 delay：营造“呼吸感”，适合菜单展开
- 长 delay 配合短 duration：制造悬念或提示用户注意某区域
推荐使用简写方式统一管理：
.element {
transition: margin-left 0.4s ease 0.2s;
/* property | duration | timing-function | delay */
}
基本上就这些。掌握好这两个参数，就能让页面动效既流畅又不突兀。
