JavaScript按键触发div动画：解决无法重复触发与无限循环问题

问题原因 #

当你重复给元素设置完全相同的animation属性值时，浏览器会判定动画属性没有发生变化，不会重新启动动画。设置infinite后动画无法停止，是因为没有在动画执行完成后重置动画属性。

可行实现 #

方案1：直接操作style属性（无需调整CSS） #

核心逻辑是每次触发按键时先清空现有动画配置，强制浏览器感知属性变更后重新绑定动画，动画播放完成后自动清空配置避免常驻：

const square = document.querySelector("div")

// 动画播放完成后清空动画属性，回到初始状态
square.addEventListener("animationend", () => {
  square.style.animation = ""
})

document.addEventListener("keydown", (e) => {
  // 跳过按住按键时的系统重复触发，避免动画卡顿
  if (e.repeat) return
  // 先清空现有动画设置
  square.style.animation = "none"
  // 强制触发浏览器重排，确保属性变更被识别
  void square.offsetWidth
  // 绑定单次播放的动画，无需设置infinite
  square.style.animation = "shake 0.5s"
})

方案2：类名切换实现（更易维护） #

把动画规则写在CSS类中，通过增删类名控制动画触发，逻辑更清晰：
首先在CSS中定义动画类：

.shake-effect {
  animation: shake 0.5s;
}

然后编写JS逻辑：

const square = document.querySelector("div")

square.addEventListener("animationend", () => {
  square.classList.remove("shake-effect")
})

document.addEventListener("keydown", (e) => {
  if (e.repeat) return
  square.classList.remove("shake-effect")
  void square.offsetWidth
  square.classList.add("shake-effect")
})

关键说明 #

• void square.offsetWidth 是触发浏览器重排的固定写法，目的是打断浏览器的属性合并优化，确保前一步清空动画/移除类的操作被实际执行，否则连续设置相同属性不会触发动画重启。
• 不需要设置animationIterationCount: "infinite"，动画默认播放1次，时长到了自动结束，配合animationend事件重置状态即可实现每次按键触发、播完即停的效果。

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