CSS翻译动画口吃/jank

Question

根据Dev中的性能选项卡，在MacBook Pro (15英寸，2016年)上，这个微不足道的CSS动画代码片段在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/因此又提交了另一个bug：

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

谢谢你的努力-我也能看到同样的东西！我提交了https://crbug.com/1049248文件，并记录了一个跟踪，在那里我看到对SwapBuffers的调用需要很长时间。请随意添加我可能错过的任何细节。

希望我们很快就能找到答案。我还在Safari 13上看到了macOS 10.15的相同问题，所以我也提交了一个WebKit错误。

bug.cgi?id=207282

目前似乎没有办法解决这个问题。

Answer 2

使用你的代码，我不会发现Chrome在2017年MBP 13版上存在太多问题。然而，用px替换vh/wv单元，以避免任何浏览器检查动态大小和添加will-change: transform;的开销，就可以消除我所看到的最小问题。

本文光滑如黄油:用CSS3实现60部FPS动画中有一些非常好的信息，可以为您提供更多的想法。

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

​

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>

​