为何第一个hover动画无过渡延迟？需实现类hue-rotate的延迟效果

问题说明 #

id为letter的元素在hover移入/移出时，glow动画会立即触发或消失，不像good元素的hue动画那样有延迟效果。需要实现：

• hover移入前触发动画有延迟
• 移出时阴影颜色平滑淡出，而非瞬间消失

解决方案 #

核心是通过CSS transition 衔接动画状态，配合animation-play-state控制动画播放，同时给元素设置初始状态让过渡生效。

修改后的完整代码 #

HTML（保持不变）

<div id="letter">
  <h1>
    Color fade smoothly when hovered in and out
  </h1>  
</div>
<div id="good">
  <h1>
    There is a delay when hovered in and out
  </h1>
</div>

CSS（调整后）

/* 基础页面样式 */
body {
  background: #000;
  color: #fff;
}

#letter {
  /* 设置初始阴影，与动画第0帧状态一致 */
  box-shadow: 0 0 15px azure, 0 0 25px azure;
  /* 添加过渡效果，实现移出时平滑淡出 */
  transition: box-shadow 0.4s ease;
  padding: 1rem;
  margin: 2rem 0;
  /* 默认暂停动画 */
  animation: glow 3s infinite;
  animation-play-state: paused;
  /* 设置移入前的延迟触发时间 */
  animation-delay: 0.5s;
}

#letter:hover {
  /* hover时启动动画 */
  animation-play-state: running;
}

#good {
  padding: 1rem;
  margin: 2rem 0;
  animation: hue 3s infinite;
  animation-delay: 0.5s;
}

/* 原有glow动画逻辑不变 */
@keyframes glow {
0% {
    box-shadow: 0 0 15px azure, 0 0 25px azure;
}
10% {
    box-shadow: 0 0 15px pink, 0 0 25px pink;
}
20% {
    box-shadow: 0 0 15px lightgoldenrodyellow, 0 0 25px lightgoldenrodyellow;
}
30% {
    box-shadow: 0 0 15px yellow, 0 0 25px yellow;
}
40% {
    box-shadow: 0 0 15px lime, 0 0 25px lime;
}
50% {
    box-shadow: 0 0 15px aqua, 0 0 25px aqua;
}
60% {
    box-shadow: 0 0 15px pink, 0 0 25px pink;
}
70% {
    box-shadow: 0 0 15px lightgoldenrodyellow, 0 0 25px lightgoldenrodyellow;
}
80% {
    box-shadow: 0 0 15px yellow, 0 0 25px yellow;
}
90% {
    box-shadow: 0 0 15px lime, 0 0 25px lime;
}
100% {
    box-shadow: 0 0 15px aqua, 0 0 25px aqua;
}}

/* 原有hue动画逻辑不变 */
@keyframes hue {
100% {
  filter: hue-rotate(360deg);
 }
}

关键调整点 #

1. 初始状态与过渡衔接：给#letter设置和动画第0帧一致的box-shadow，并添加transition属性，让移出时从动画状态平滑过渡到初始阴影
2. 动画播放状态控制：用animation-play-state: paused让动画默认暂停，hover时切换为running，配合animation-delay实现移入前的延迟触发
3. 保留原有动画逻辑：不修改glow和hue动画的核心帧定义，只调整状态切换方式，确保原有动画效果不变

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