transition-delay - 过渡延迟

语法说明

transition-delay: time;

• time - 延迟时间
• s（秒）：1s = 1000ms
• ms（毫秒）：1000ms = 1s
• 默认值是 0s（立即开始）
• 可以为不同元素设置不同延迟，创建连续动画效果

示例 1：无延迟 vs 有延迟

对比立即开始和延迟 0.5 秒开始的效果

/* 无延迟 */
.no-delay {
  transition: transform 0.8s;
}

/* 延迟 0.5 秒 */
.with-delay {
  transition: transform 0.8s 0.5s;
  /* 格式：属性 持续时间 延迟时间 */
}

示例 2：连续动画效果

通过不同的延迟时间创建依次出现的效果

.box-1 { transition-delay: 0s; }
.box-2 { transition-delay: 0.2s; }
.box-3 { transition-delay: 0.4s; }
.box-4 { transition-delay: 0.6s; }

示例 3：悬停延迟效果

鼠标悬停时延迟显示提示信息

.tooltip {
  transform: scale(0);
  transition: transform 0.3s 0.5s;
  /* 悬停 0.5 秒后才显示 */
}

.box:hover .tooltip {
  transform: scale(1);
}

常见应用场景