如何实现CSS动画结束后才触发hover过渡效果（无JS方案）

核心问题分析 #

你遇到的问题本质是CSS动画样式优先级高于普通hover规则：动画播放时，关键帧中的样式会覆盖hover状态；当使用animation-fill-mode: forwards时，动画结束后保留的关键帧样式优先级与普通规则相同，若hover规则权重不足或定义顺序不当，就会导致hover效果无法触发或无过渡。

而你用未到100%的keyframes能生效，是因为动画未走到最终关键帧，结束后元素会回到默认样式，此时hover规则能正常触发过渡，但这属于投机取巧，并非规范用法。

最佳纯CSS方案（推荐） #

将动画的最终状态设为元素的默认样式，动画仅定义初始状态，不使用forwards。这样动画结束后元素自动回到默认的最终状态，hover过渡会正常生效；动画播放过程中，关键帧样式会覆盖hover规则，确保hover仅在动画完成后触发。

示例代码：

/* 元素默认样式 = 动画最终状态 */
.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 给hover状态设置过渡 */
  transition: background-color 0.3s ease;
  /* 动画从初始状态（红色）过渡到默认样式（蓝色），播放一次 */
  animation: fadeInFromRed 2s;
}

/* 仅定义动画的初始状态，to会自动继承元素默认样式 */
@keyframes fadeInFromRed {
  from {
    background-color: red;
  }
}

/* hover状态：基于动画最终状态过渡到绿色 */
.animated-box:hover {
  background-color: green;
}

原理：

1. 动画播放时，关键帧的from样式优先级高于hover规则，hover不会触发
2. 动画结束后，元素回到默认的蓝色（动画最终状态），此时hover规则的样式与默认样式有差异，且已设置transition，所以会平滑过渡

备选方案（需用forwards的场景） #

如果必须通过animation-fill-mode: forwards保留动画最终状态，只需确保hover规则的优先级足够，就能覆盖动画保留的样式并触发过渡。

示例代码：

.animated-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.3s ease;
  /* 动画到蓝色并保留该状态 */
  animation: fadeToBlue 2s forwards;
}

@keyframes fadeToBlue {
  to {
    background-color: blue;
  }
}

/* 增加选择器权重，确保hover样式能覆盖forwards状态 */
.animated-box.animated-box:hover {
  background-color: green;
}

注意：也可以通过将hover规则定义在动画规则之后（同权重下后定义的规则生效），但增加权重的方式更可靠。

关于未到100%keyframes的疑问 #

这种用法是CSS规范允许的（keyframes支持定义任意百分比的关键帧），但不推荐作为通用解决方案，原因如下：

• 动画不完整，无法实现预期的完整动效
• 若动画涉及多个属性，未定义100%关键帧会导致动画结束后元素跳回默认样式，可能出现状态突变
• 长期维护性差，其他开发者接手时容易误解代码逻辑

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