I'd like to know what perf differences to expect from css animation (keyframes) vs css transition.
In my testing it seems there are situations where transition performs far better than keyframes. This article also suggests the same but it's from 2015 so thought it might be outdated https://www.pixelstech.net/article/1434375977-CSS3-animation-vs-CSS3-transition
Looking at MDN https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance it states "In terms of performance, there is no difference between implementing an animation with CSS transitions or animations. Both of them are classified under the same CSS-based umbrella in this article."
So I'm surprised to see such as difference in testing. Maybe they're the same on firefox, but using Chrome I definitely see a difference.
I've made some tests on codesandbox to show animation jank with keyframes vs transition. Some important factors here: 1. I'm animating both transform and border-radius. I know you "shouldn't" animate border-radius, but this is part of the test. 2. When I combined the 2 tests into a SPA and toggled between them they both performed well, so it may be to do with page load.
To view the test in all its jankiness select 'mid-tier mobile' using chrome dev tools.
Janky css animation https://codesandbox.io/s/perf-test-css-animation-nl6xs
Smooth css transition https://codesandbox.io/s/perf-test-css-transition-fgd7w
Any help with this would be appreciated. I'm sure we can't fix it, but would like to know why keyframes sometimes has poor performance compared to transition.
Thanks!