实现CSS动画加载时执行3次、Hover时执行1次

问题分析 #

核心矛盾是：.a-icon默认绑定了循环3次的a-wobble动画，hover父按钮时，新动画会和原动画并行执行，导致冲突。这是因为CSS中同一元素的多个动画会同时生效，除非显式重置原有动画属性。

可行解决方案 #

不需要重复定义完全相同的a-wobble2动画，通过重置原有动画属性+复用同一动画就能实现互斥效果，同时简化代码：

优化后的CSS代码 #

/* 只保留一套动画定义，现代浏览器无需前缀兼容 */
@keyframes a-wobble {
  0% { transform: rotate(0deg); }
  80% { transform: rotate(0deg); }
  85% { transform: rotate(15deg); }
  95% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}

#a-button {
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 3rem;
  transform: scaleX(-1);
  cursor: pointer;
  backface-visibility: hidden;
}

.a-icon {
  height: 100%;
  animation: a-wobble 1.5s 3;
  backface-visibility: hidden;
  transition: all 0.3s;
}

.a-button {
  all: unset;
  cursor: pointer;
  border: solid #E10000 1px;
  border-radius: 10px 10px 0px 10px;
  padding: 10px 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #E10000;
  color: white;
  font-family: "Raleway", sans-serif;
  position: relative;
}

.a-icon-size {
  width: 50px;
  height: 50px;
  background: blue;
}

/* hover时先终止原动画，再执行一次新动画 */
.a-button:hover > .a-icon {
  animation: none; /* 立即停止当前运行的所有动画 */
  animation: a-wobble 1.5s 1; /* 重新绑定单次播放的动画 */
  animation-delay: 0s; /* 确保hover时立刻触发 */
}

生效原理 #

1. 终止原动画：animation: none会直接中断元素上正在运行的初始动画，避免两个动画叠加。
2. 复用动画资源：无需额外定义重复动画，仅修改播放次数为1次即可。
3. 强制即时触发：animation-delay: 0s消除潜在延迟，保证hover动作和动画启动同步。

进阶优化：类控动画（更灵活） #

如果需要后续动态控制动画状态（比如手动触发/停止），可以用类来管理动画：

/* 基础样式不变，调整动画绑定逻辑 */
.a-icon {
  height: 100%;
  backface-visibility: hidden;
  transition: all 0.3s;
}

/* 页面加载时的初始动画类 */
.a-icon.initial-wobble {
  animation: a-wobble 1.5s 3;
}

.a-button:hover > .a-icon {
  animation: none;
  animation: a-wobble 1.5s 1;
}

对应HTML调整：

<div>
  <button class="a-button bottom">
    <h3>Test </h3>
    <div id="a-icon" class="a-icon a-icon-size initial-wobble"></div>
  </button>
</div>

这种方式可以通过JavaScript动态添加/移除类，实现更复杂的动画控制逻辑。

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