如何以最小的影响重新启动 CSS 动画答案

【问题标题】：How to restart CSS Animation with minimal impact如何以最小的影响重新启动 CSS 动画
【发布时间】：2018-04-14 21:15:18
【问题描述】：

有没有办法在不克隆元素、回流 DOM、等待 (setTimeout/onAnimationEnd) 的情况下重新启动 CSS 动画？

【问题讨论】：

@freedomn-m 当然不是，看字“like”
@freedomn-m 不是真的，因为它可以用于每个实际的“重启动画”场景
什么情况下setTimeout不受欢迎？

标签： jquery css animation

【解决方案1】：

编辑： 不需要 jQuery 或检查。

我基本上只是在下一个绘制帧重新开始动画。

此方法不克隆任何元素、重排文档、设置任何超时或等待动画完成。它是 100% 灵活的，不需要 jQuery。

我没有看到任何类似的东西（即使在css-tricks 也没有）所以我想与您分享我的想法并听听您的想法。

Browser support

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>

【讨论】：

你能在纯javascript中发布相同的功能
@vikrant 纯 JavaScript，不需要检查状态！
我会尝试在我的项目中使用这个方法
我会观察是否会有一些缺点。
在 PC 上运行良好。在 Android Vivaldi 上没那么多