CSS翻译动画口吃/jank

Question

根据DEV工具的"性能"选项卡，此琐碎的CSS动画代码段在MacBook Pro(15英寸，2016年(中在Chrome 58中没有60 fps。它主要是平滑，但是正方形偶尔会在动画过程中显然跳过一两个框架。为什么？我该如何解决？

编辑：它仍然在Chrome 79中复制在16英寸2019 MacBook Pro。

div {
  background-color: red;
  height: 10vh;
  width: 10vh;
  margin: 10vh;
  animation-name: slide;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(1000%); }
  100% { transform: translateX(0); }
}

<div></div>

Answer 1

我设法让铬工程师在Twitter上进行研究。

https://mobile.twitter.com/flackrw/status/1225116562010656769

可悲的是，动画没有合成，因为百分比变换键帧取决于布局大小。这不是基本的，这是我们要修复的简短清单！https://crbug.com/389359这是一个很好的例子，说明合成效果很有帮助。

但是从translateX(1000%)切换到400px无济于事。https://css-stutter.glitch.me/因此提出了另一个错误：

https://mobile.twitter.com/flackrw/status/12251441628799104

感谢您的尝试 - 我可以看到同样的！我提交了https://crbug.com/1049248，并录制了一条痕迹，我看到对SwapBuffers的电话偶尔需要很长时间。随时添加我可能错过的任何细节。

，希望我们很快就会在那里得到答案。我在MacOS 10.15的Safari 13上也看到了同样的问题，所以我也提交了Webkit错误。

https://bugs.webkit.org/show_bug.cgi?id=207282

目前似乎无法解决此问题。

Answer 2

使用您的代码，我不会在2017 MBP 13上看到很多问题。但是，用px替换VH/WV单元，以避免从开销中避免使用任何浏览器检查动态尺寸并添加will-change: transform;清理了我所看到的最小问题。

本文中有一些很好的信息，因为黄油：使用CSS3实现60 fps动画，可能会给您其他想法。

但是，在这一点上，我可能会将任何jankinession归因于您示例中的其他元素。

div {
  background-color: red;
  height: 20px;
  width: 20px;
  margin: 20px;
  animation-name: slide;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform;
}
@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(1000%); }
  100% { transform: translateX(0); }
}

<div></div>