-2

我想知道 css 动画（关键帧）与 css 过渡的性能差异。

在我的测试中，似乎在某些情况下，过渡效果比关键帧好得多。这篇文章也提出了相同的建议，但它是从 2015 年开始的，所以认为它可能已经过时了https://www.pixelstech.net/article/1434375977-CSS3-animation-vs-CSS3-transition

查看 MDN https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance 它指出“在性能方面，使用 CSS 过渡或动画实现动画没有区别。它们都是在本文中归类在同一个基于 CSS 的保护伞下。”

所以我很惊讶地看到测试中的差异。也许它们在 Firefox 上是一样的，但使用 Chrome 我肯定会看到不同。

我已经对代码沙箱进行了一些测试，以显示带有关键帧与过渡的动画卡顿。这里有一些重要因素： 1. 我正在为变换和边界半径设置动画。我知道你“不应该”为边界半径设置动画，但这是测试的一部分。2. 当我将这两个测试组合成一个 SPA 并在它们之间切换时，它们都表现良好，所以这可能与页面加载有关。

要查看测试的所有 jankiness，请使用 chrome 开发工具选择“mid-tier mobile”。

  1. Janky css 动画 https://codesandbox.io/s/perf-test-css-animation-nl6xs

  2. 平滑的 css 过渡 https://codesandbox.io/s/perf-test-css-transition-fgd7w

对此的任何帮助将不胜感激。我确信我们无法修复它，但想知道为什么关键帧有时与过渡相比性能较差。

谢谢！

4

1 回答 1

0

两者似乎都应该是非常有效的动画，因为它们只是复合变化（因为它们按比例动画是有效的）： https ://csstriggers.com/transform

我认为问题可能在于您的测试不是“公平”比较。

css 动画（关键帧）：此动画立即出现在客户端浏览器上。它还为keyframes.

css 过渡：当 React 完成它的挂载（就像它在useEffect钩子上完成的那样）并且不执行keyframes函数时，会发生此动画。

因此，第一个css 动画（关键帧）测试可能会受到 React 在完成其生命周期事件时从浏览器动画中获取宝贵资源的影响。

此外，额外的情绪keyframes调用可能会减慢它的速度 - 它会再次css调用https://github.com/emotion-js/emotion/blob/6cb8d15438b01b8623af42f304d5ea3032332187/packages/core/src/keyframes.js#L11如此有效，您调用css了两次与关键帧测试。

在纯 HTML + CSS 中进行比较可能会更好，这样 React 或 JS 就不会妨碍您并给您错误的印象，其中一个比另一个更好

于 2020-05-02T13:39:40.690 回答