我想知道css动画(关键帧)与css过渡有什么差异。
在我的测试中，似乎有些情况下过渡期的表现远比关键帧好。这篇文章也提出了同样的建议，但它是2015年的，所以认为它可能已经过时了。https:/www.pixelstech.netarticle1434375977-CSS3-animation-vs-CSS3-transition
审视MDN https:/developer.mozilla.orgen-USdocsWebPerformanceCSS_JavaScript_animation_performance。它指出："在性能方面，用CSS过渡或动画实现动画没有区别。在本文中，它们都被归入了同一个基于CSS的范畴。"
所以我很惊讶在测试中看到这样的差异。也许它们在firefox上是一样的，但使用Chrome浏览器，我绝对看到了差异。
我在codesandbox上做了一些测试，用关键帧与过渡来显示动画jank。这里有一些重要的因素：1.我同时在转换和边界半径上做动画。我知道你 "不应该 "对边框-半径进行动画处理，但这是测试的一部分。2.当我把这2个测试合并到一个SPA中，并在它们之间切换时，它们都表现得很好，所以这可能与页面加载有关。
要查看测试中所有的jankiness选择 "mid-tier mobile "使用chrome开发工具。
janky css动画https:/codesandbox.iosperf-test-css-animation-nl6xs。
平滑的css过渡https:/codesandbox.iosperf-test-css-transition-fgd7w。
如果能得到任何帮助，将不胜感激。我相信我们无法解决这个问题，但想知道为什么关键帧有时与过渡相比性能很差。
谢谢!
两者看起来都应该是相当高效的动画，因为它们只是复合变化（因为它们是按比例动画，这是高效的）。https:/csstriggers.comtransform）。
我想问题可能出在你的测试不是一个 "公平 "的对比。
css动画（关键帧: 这个动画直接在客户端浏览器上发生。同时，它还在执行一些更多的情感代码，用于 keyframes.
css过渡: 当React完成挂载时，这个动画就会发生（就像它在一个 useEffect 钩子），而不执行一个 keyframes 的功能。
所以，第一个 css动画（关键帧 测试可能会受到影响，因为React在完成其生命周期事件时，占用了浏览器动画的宝贵资源。
此外，额外的情感 keyframes 呼叫可能会减慢它的速度--它使另一个 css 召唤 https:/github.comemotion-jsemotionblob6cb8d15438b01b8623af42f304d5ea3032332187packagescoresrckeyframes.js#L11。 所以你实际上是在说 css 两次与关键帧测试。
可能最好用纯HTML+CSS做一个对比，这样React或JS就不会妨碍你，让你产生一个比另一个好的假象。