通过指定应用css规则的时间点来加速javascript动画

假设我在一个页面上有10个元素

目前，我正在循环中迭代它们，改变宽度和位置：

el[i].style.width = ....
el[i].style.left = ....

---

我想知道如果我告诉浏览器在循环完成后只重新渲染一次所有元素，动画是否可以运行得更快如果您将更改应用于共享类或加载包含所有更改的样式表，这将使所有更改同时应用，虽然不确定对性能的影响…

使用CSS3速度更快，您需要编写的代码也更少，看看这个，我刚刚做了两个示例，一个是使用（.anima2），另一个是使用（.anima）。使用JS，您只需应用和删除类

由我调查（不完全跨浏览器，行为不同和变化，这需要大量的测试和基准测试）：

a）

requestAnimationFrame

b） CSS

translate3d

和其他新的CSS3，而不是

left

用于GPU优化

---

稍后再来，我会告诉你结果是CSS3还是jQuery选项？预定义的CSS3样式不是选项，因为我正在编写一个带有移动元素的游戏，你可以使用转换<代码>转换：所有1s线性transition:width 1s linear，left.5s ease in outetcjQuery不是一个选项。jQuery是“代码快，播放慢”，我希望在应用了20条CSS规则后重新呈现页面。现在页面被重新渲染了20次，sadlyI正在使用一些公式计算CSS规则，没有机会预测数字）