我有一个非常复杂的网络应用程序，使用-webkit-transform和-webkit-transition完成复杂的60fps动画。通常有几十个项目同时动画。当它“达到速度”时，动画看起来很棒，但是当用户提供输入时，有时动画中的“减速”非常明显。大部分动画都非常高效，但是当许多项目从静态转换为移动时，我都无法在javascript中找到明显的延迟。
答案 0 :(得分：4)
追踪这个很棘手，但我已经完全解决了这个问题：
问题似乎是，当一个没有3d变换的对象突然得到一个时，会有一个“停顿”，而该元素的位图会被发送到视频卡。当你有很多项目这样做时，它会非常明显，并将你的60fps体验变为......更少的东西。
答案很简单：保持“null”3d变换你的物品，即使它们目前不是3D。通过这种方式，图像可以尽早传输到视频卡，当您需要为它们设置动画时，您将不会遇到很大的延迟。
这将有效： -webkit-transform：translateZ（1px）
这个可能有效，但我可以想象它会在未来的版本中进行优化（因为它没有明显的效果） -webkit-transform：translateZ（0px）