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

Posted 2023-03-06

【中文标题】如何以最小的影响重新启动 CSS 动画

【英文标题】：How to restart CSS Animation with minimal impact

【发布时间】：2018-04-14 21:15:18

【问题描述】：

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

【问题讨论】：

@freedomn-m 当然不是，看字“like”

@freedomn-m 不是真的，因为它可以用于每个实际的“重启动画”场景

什么情况下setTimeout不受欢迎？

【参考方案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 上没那么多