在 CSS3 中，虽然单个元素的 transition-delay 只能设置一个延迟值，但你可以通过以下几种方式实现 “多个延迟效果”，比如让不同属性以不同时间延迟开始动画，或让多个元素依次延迟变化。

✅ 一、为同一元素的不同属性设置不同延迟

你可以使用 transition 简写语法，为每个属性单独指定延迟时间。

示例：颜色、位移、缩放分别延迟

Css深色版本.box {  opacity: 1;  transform: translateX(0) scale(1);    transition: 
    opacity 0.3s ease 0.1s,           /* 0.1秒后开始 */    transform 0.6s ease 0.3s,         /* 0.3秒后开始 */    background-color 0.4s linear 0.5s; /* 0.5秒后开始 */}.box:hover {  opacity: 0.8;  transform: translateX(50px) scale(1.2);  background-color: #ff6b6b;}

✅ 效果：

• 悬停后，透明度先在 0.1s 后变化

• 接着 0.3s 后开始移动和缩放

• 最后 0.5s 后背景色渐变

✅ 二、多个元素依次延迟出现（常用于动画序列）

通过为不同元素设置递增的 transition-delay，实现“逐个入场”效果。

HTML

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

CSS

Css深色版本.item {  opacity: 0;  transform: translateY(20px);  transition: all 0.5s ease;}.list:hover .item {  opacity: 1;  transform: translateY(0);}/* 为每个子项设置不同延迟 */.item:nth-child(1) { transition-delay: 0.1s; }.item:nth-child(2) { transition-delay: 0.3s; }.item:nth-child(3) { transition-delay: 0.5s; }

✅ 效果：鼠标悬停时，三个元素依次延迟出现，形成流畅的动画序列。

✅ 三、使用 CSS 自定义属性（变量）简化延迟设置

适合多个元素有规律地延迟。

Css深色版本.item {  --delay: 0.1s;  opacity: 0;  transition: opacity 0.3s ease var(--delay);}.item:nth-child(1) { --delay: 0.1s; }.item:nth-child(2) { --delay: 0.3s; }.item:nth-child(3) { --delay: 0.5s; }.item:hover {  opacity: 1;}

✅ 四、结合 animation 实现更复杂的延迟控制（进阶）

如果你需要更复杂的延迟逻辑，可以使用 @keyframes 动画，它天然支持多阶段延迟。

Css深色版本.animate {  animation: slideIn 0.6s ease 0.2s forwards, 
             fadeIn 0.8s linear 0.4s forwards;}@keyframes slideIn {  to { transform: translateX(0); }}@keyframes fadeIn {  to { opacity: 1; }}

⚠️ 注意：一个元素不能同时运行两个 animation，但可以通过 @keyframes 合并逻辑，或使用 JavaScript 控制。

✅ 五、JavaScript 动态控制多个延迟（灵活方案）

Javascript深色版本const items = document.querySelectorAll('.item');items.forEach((item, index) => {  item.style.transitionDelay = `${0.1 + index * 0.2}s`;});

适用于动态内容或交互触发的动画。

✅ 六、最佳实践建议

✅ 总结

通过合理使用这些技巧，你可以轻松实现有节奏、有层次的动画效果，让界面更加生动和专业。