Question

根据Dev Tools中的Performance选项卡，这个简单的CSS动画代码片段在MacBook Pro（15英寸，2016年）的Chrome 58中无法获得60 fps。它的主要是平滑，但在动画期间偶尔会偶尔跳过一两帧。为什么？我该如何解决这个问题？

＆＃13;

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); }
}

＆＃13;

<div></div>

＆＃13;

Answer 1

我设法让一位Chromium工程师在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/1225144162858799104

感谢您的尝试-我能够看到相同的内容！我提交了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“上的Chrome中，我不会看到很多问题。但是，用px替换vh / wv单位，以避免浏览器检查动态尺寸和添加will-change: transform;可以清除我看到的最小问题。

本文Smooth as Butter: Achieving 60 FPS Animations with CSS3中有一些很好的信息，可能会给您带来更多的想法。

但是，在这一点上，我可能会把页面中没有显示的其他问题归因于您示例中未包含的其他元素。

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>

CSS翻译动画口吃/ jank

2 个答案: