如何实现CSS背景色过渡效果的结尾延迟？

CSS的transition属性本身没有专门的“过渡结束后延迟”参数，但可以通过两种方式实现你要的效果：

方法一：针对反向过渡设置延迟 #

这种方式适合需要在触发状态（比如hover）结束后，让目标背景色先保持一段时间，再恢复初始状态的场景。

核心思路是：给元素的初始状态设置过渡延迟（用于反向过渡），而给触发状态设置无延迟的过渡（用于正向过渡）。

示例代码：

/* 初始状态：反向过渡（从红色回到白色）延迟1秒，过渡时长500ms */
.color-box {
  width: 200px;
  height: 200px;
  background-color: #ffffff;
  transition: background-color 500ms 1s;
}

/* 触发状态（hover）：正向过渡（从白色到红色）无延迟，过渡时长500ms */
.color-box:hover {
  background-color: #ff4444;
  transition: background-color 500ms 0s;
}

效果说明：鼠标悬停时，背景色立即用500ms过渡到红色；鼠标离开后，红色背景会保持1秒，再用500ms过渡回白色——相当于红色状态在过渡结束后停留了1秒。

方法二：使用CSS动画（@keyframes）精确控制阶段 #

如果需要更复杂的时序（比如触发后自动完成“过渡→停留→恢复”的完整流程，不需要等待状态取消），可以用CSS动画来定义每个阶段的时长。

示例代码：

/* 定义动画：初始色→过渡到目标色→保持目标色→过渡回初始色 */
@keyframes bg-delay {
  0% { background-color: #ffffff; }
  20% { background-color: #ff4444; } /* 前20%时长（400ms）完成过渡 */
  80% { background-color: #ff4444; } /* 20%-80%时长（1200ms）保持目标色 */
  100% { background-color: #ffffff; } /* 最后20%时长（400ms）过渡回初始色 */
}

.color-box {
  width: 200px;
  height: 200px;
  background-color: #ffffff;
}

/* 触发动画（比如点击后） */
.color-box.active {
  animation: bg-delay 2s forwards; /* 总时长2秒，动画结束后停留在最后一帧 */
}

效果说明：给元素添加active类后，背景色会用400ms变红，保持1200ms，再用400ms变白，整个流程自动完成。如果不需要最后变回初始色，可以调整关键帧或动画的forwards行为。

内容的提问来源于stack exchange，提问作者Sesha Ganesh