CSS旋转动画仅触发一次，如何实现每次点击都播放？

原因 #

浏览器触发CSS动画的核心条件是animation属性发生有效变更。第一次点击时，元素的animation从默认的none变为spin 1s，属性值产生变化，动画正常启动；但后续重复点击时，你设置的是和当前完全相同的animation值，浏览器判定属性没有更新，因此不会重新触发动画流程。

基于onclick的解决方案 #

方案1：强制触发属性变更（推荐） #

通过先清除动画，再强制浏览器重绘，最后重新设置动画。利用读取元素布局属性（如offsetWidth）触发浏览器即时重绘，确保清除动画的操作被生效，之后再设置新的动画值就能触发播放：

function triggerSpin(elementName) {
  const elem = document.getElementById(elementName);
  // 第一步：清除当前动画
  elem.style.animation = 'none';
  // 强制浏览器重绘，确保清除操作生效
  void elem.offsetWidth;
  // 第二步：重新设置动画
  elem.style.animation = 'spin 1s';
}

方案2：动画结束后清除属性 #

监听animationend事件，在动画播放完毕后清除元素的animation属性。这样下次点击时，animation会从空值变为spin 1s，属性值产生变化，从而触发动画：

function triggerSpin(elementName) {
  const elem = document.getElementById(elementName);
  // 设置动画
  elem.style.animation = 'spin 1s';
  // 动画结束后清除属性，避免重复绑定监听
  elem.addEventListener('animationend', function handler() {
    elem.style.animation = '';
    elem.removeEventListener('animationend', handler);
  });
}

方案3：使用setTimeout延迟设置 #

如果觉得读取布局属性的方式不够直观，也可以用setTimeout给浏览器一点时间处理属性清除，再重新设置动画：

function triggerSpin(elementName) {
  const elem = document.getElementById(elementName);
  elem.style.animation = 'none';
  setTimeout(() => {
    elem.style.animation = 'spin 1s';
  }, 10);
}

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