Perf css 动画与过渡答案

【问题标题】：Perf css animation vs transitionPerf css 动画与过渡
【发布时间】：2020-08-16 18:08:08
【问题描述】：

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

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

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

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

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

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

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

谢谢！

【问题讨论】：

【解决方案1】：

看起来它们都应该是非常有效的动画，因为它们只是复合变化（因为它们按比例制作动画，这是有效的）： 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 就不会妨碍您并给您一种比另一个更好的错误印象

【讨论】：