同一元素CSS多动画冲突问题：加载与悬停动画兼容方案

你遇到的问题根源在于：同一个元素在同一时刻只能运行一个命名动画。当你在:hover伪类中替换animation-name时，浏览器会立即中断当前正在运行的初始动画，把元素重置到动画的初始状态，然后开始执行hover动画；当鼠标离开后，又会重新触发初始动画，导致它从头开始运行。

下面给出两种简单有效的解决方案：

方案一：用Transition处理hover颜色变化（推荐） #

这种方法最简洁，因为颜色过渡用transition实现足够平滑，而且不会干扰已经完成的初始动画状态：

.animation {
  width: 150px;
  height: 150px;
  background-color: red;
  /* 初始动画：执行一次后保持最终状态 */
  animation: anim 3s forwards;
  /* 添加颜色过渡动画 */
  transition: background-color 1s;
}

.animation:hover {
  /* hover时直接改变颜色，transition会自动处理动画 */
  background-color: yellow;
}

@keyframes anim {
  30% { transform: translateX(100px); }
  70% { transform: translate(100px, 100%); }
  100% { transform: translate(100px, 100%) scale(2, 2) rotate(145deg); }
}

初始动画完成后，元素会一直保持transform的最终状态；hover时只是修改背景色，通过transition实现平滑过渡，完全不会影响之前的动画效果。

方案二：用多个动画同时运行（纯@keyframes实现） #

如果你坚持要用@keyframes实现hover的颜色动画，可以通过逗号分隔的方式同时指定多个动画，确保初始动画不会被替换：

.animation {
  width: 150px;
  height: 150px;
  background-color: red;
  /* 初始动画：执行一次后保持最终状态 */
  animation: anim 3s forwards;
}

.animation:hover {
  /* 同时保留初始动画（已完成，不会重复运行）和hover颜色动画 */
  animation: anim 3s forwards, hoverAnim 1s forwards;
}

@keyframes anim {
  30% { transform: translateX(100px); }
  70% { transform: translate(100px, 100%); }
  100% { transform: translate(100px, 100%) scale(2, 2) rotate(145deg); }
}

@keyframes hoverAnim {
  to { background-color: yellow; }
}

这里的关键是，hover时没有替换初始动画，而是额外添加了一个颜色动画。由于初始动画已经执行完毕（animation-iteration-count默认是1），所以不会重新运行，只会执行新的颜色动画。

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