Perf css animation vs transition

Question

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.

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

2. 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!

Answer 1

Both seem like they should be pretty efficient animations as they are only composite changes (as they animate on scale which is efficient): https://csstriggers.com/transform

I think the issue might be the fact that your test is not a "fair" comparison.

css animation (keyframes): This animation occurs straight away on the client browser. Also it's executing some more emotion code for keyframes.

css transition: This animations happens when React has completed its mount (as its done on a useEffect hook) and doesnt execute a keyframes function.

So the first css animation (keyframes) test might be effected by React taking precious resources away from the browser animation while it completes its lifecycle events.

Also the extra emotion keyframes call could slow it down - it makes another css call https://github.com/emotion-js/emotion/blob/6cb8d15438b01b8623af42f304d5ea3032332187/packages/core/src/keyframes.js#L11 so effectively you're calling css twice with the keyframes test.

Might be better to make a comparison in plain HTML + CSS so React or JS don't get in the way and give you false impression one is better than the other