• 编辑：* 不需要jQuery或check。

我基本上只是在下一个绘制帧重新启动动画。
这个方法不克隆任何元素，不重排文档，不设置任何超时，也不等待动画的完成。它是100%灵活的，不需要jQuery。
我还没有看到类似的东西（甚至在css-tricks上也没有），所以我想和你分享我的想法，听听你的想法。
浏览器支持

document.querySelector('.box').onclick = function(){
  requestAnimation( this );
};

var requestAnimation = function( obj ){
  obj.style.animation = 'none';
  window.requestAnimationFrame(function(){
    obj.style.animation = 'myAnimation 1s';
  });
}

html{ background: #212121; }

.box{
  width: 150px;
  background: white;
  cursor: pointer;
  text-align: center;
  margin: auto;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 3px black;
}
span{
  float: right;
  color: grey;
}
@keyframes myAnimation{
  from{ background: grey; transform: scale(1.2); }
  to{ background: white; transform: scale(1); }
}

<div class="box">I can animate forever!</div>
<span>By Luca Rossi</span>

我发现的“重启”CSS动画的最简单、最可靠的方法是这个答案：https://stackoverflow.com/a/72525340/3705191

TL;DR：* 在两个相同的关键帧动画之间切换 *

要点如下：
1.创建2相同的关键帧声明（例如animation1和animation2）
1.将 * 其中之一 * 分配给所需元素的animation属性

• 当想要重新启动时，检查元素当前具有的动画关键帧的名称，然后切换到其他关键帧名称
• • 这可以通过各种方式实现，但切换是必不可少的 *

示例

@keyframes popup1 {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes popup2 {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.animated-element {
  animation: popup1 200ms ease;
}

// when wanting to restart:
const el = document.$('.animated-element');

// animationName only returns the name
if( el.style.animationName == 'popup1' ){
  el.style.animation = 'popup2 200ms ease';
} else {
  el.style.animation = 'popup1 200ms ease';
}