性能css动画vs过渡

我想知道css动画（关键帧）与css转换的性能差异

在我的测试中，似乎有些情况下过渡的性能远远好于关键帧。这篇文章也提出了同样的建议，但它是从2015年开始的，所以我认为它可能已经过时了

查看MDN 它指出“在性能方面，使用CSS转换实现动画和使用动画之间没有区别。在本文中，这两种方法都被归为基于CSS的保护伞。”

因此，我很惊讶地看到测试中的这种差异。也许它们在firefox上是一样的，但使用Chrome我肯定看到了不同

我在codesandbox上做了一些测试，以显示带有关键帧和过渡的动画jank。这里有一些重要因素： 1.我正在设置变换和边界半径的动画。我知道您“不应该”设置边界半径的动画，但这是测试的一部分。 2.当我将这两个测试组合成一个SPA并在它们之间切换时，它们都表现得很好，所以这可能与页面加载有关

要查看所有Jankines的测试，请使用chrome开发工具选择“中端移动”

简奇css动画

平滑css转换

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

---

谢谢

两者似乎都应该是非常有效的动画，因为它们只是合成更改（因为它们以有效的比例进行动画）：

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

css动画（关键帧）：此动画直接出现在客户端浏览器上。此外，它还在为

关键帧执行更多的情感代码

css转换：当React完成装载（就像它在
useEffect
挂钩上所做的那样）并且没有执行
关键帧
功能时，会发生此动画

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

另外，额外的情绪
keyframes
调用可能会减慢速度-它会使另一个
css
调用非常有效，您可以使用keyframes测试调用
css
两次

最好是用普通的HTML+CSS进行比较，这样React或JS就不会妨碍你，给你一个比另一个好的错误印象