mma*_*rin 3 html css 3d webkit transform
我有一个极其复杂的 Web 应用程序，其中包含使用 -webkit-transform 和 -webkit-transition 完成的复杂 60fps 动画。通常有数十个项目同时进行动画处理。当它“达到速度”时，动画看起来很棒，但是当用户给出输入时，动画有时会出现非常明显的“减速”。大部分动画的性能都非常出色，但是当许多项目从静态过渡到移动时，会出现明显的滞后，我无法在 JavaScript 中找到这一滞后。
这很难追踪，但我已经完全修复了它：
问题似乎是，当没有 3D 变换的对象突然获得 3D 变换时，在将该元素的位图发送到视频卡时会出现“停顿”。当您有很多项目执行此操作时，它可能会非常明显，并将您的 60fps 体验转变为……更少的东西。
答案非常简单：在您的物品上保留“空”3D 变换，即使它们目前不是 3D。这样，图像将尽早传输到视频卡，并且当您需要为它们设置动画时，不会出现很大的延迟。
这将起作用：-webkit-transform：translateZ（1px）
这可能有效，但我可以想象它会在未来的版本中被优化（因为它没有可见的效果） -webkit-transform:translateZ(0px)