CSS动画hover效果失效求助：自动摆动与hover摆动无法共存

你遇到的问题核心是同一个元素的animation属性在默认状态和hover状态下的设置冲突——当你给元素同时设置了默认自动动画和hover动画时，后者会覆盖前者，导致两者无法同时生效（或者hover结束后默认动画无法正常恢复）。下面给你两种可行的解决思路：

思路一：复用同一个动画，调整动画参数（推荐） #

先定义通用的摆动动画，默认状态下让它循环播放；hover时只修改动画的时长、播放次数等参数，不重新定义整个animation属性，这样hover结束后会自动恢复默认的自动摆动效果。

示例代码：

/* 定义摆动的关键帧动画 */
@keyframes swing {
  0% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
  100% { transform: rotate(-6deg); }
}

/* 默认状态：每2.5秒循环摆动 */
.target-element {
  animation: swing 2.5s ease-in-out infinite;
}

/* hover状态：加快摆动速度，连续摆动3次 */
.target-element:hover {
  animation-duration: 0.4s;
  animation-iteration-count: 3;
}

思路二：hover时暂停默认动画，触发单次摆动 #

如果希望hover时暂时停止自动循环，只触发一次摆动，之后再恢复自动循环，可以这样设置：

@keyframes swing {
  0% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
  100% { transform: rotate(-6deg); }
}

.target-element {
  animation: swing 2.5s ease-in-out infinite;
}

.target-element:hover {
  /* 暂停默认的循环动画 */
  animation-play-state: paused;
  /* 触发一次快速摆动 */
  animation: swing 0.6s ease-in-out 1 forwards;
}

注意事项 #

• 确保你的动画关键帧@keyframes只定义一次，不要重复定义同名动画，否则会导致样式冲突。
• 如果你的元素还设置了静态的transform属性，会被动画中的transform覆盖，需要调整关键帧的基准值。

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