CSS animations off the UI thread
This excellent Google I/O talk mentions that Chrome for Android moves the CSS animations off of the UI thread, which is, of course, a great idea. Playing around with it, here's what I found:
- Browser support: Desktop Safari, iOS Safari, Android Chrome.
- You need to use CSS transforms. Animating regular properties doesn't work.
Update: (see comments) confirmed support in IE10. Reported support in Firefox OS too, but I cannot personally confirm
More details and test page below.
Single UI thread
As you probably know the browser is single threaded. Do something heavy in ECMAScript land and everything freezes.
The big idea
CSS animations should be excluded from the "everything" that freezes.
Test page
Here's a test page with some animations. Click the kill button and see what happens.
Animations
The red box that spins is animated like:
.spin { animation: 3s rotate linear infinite; } @keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} }
The green one is also animated with a transform:
.walkabout-new-school { animation: 3s slide-transform linear infinite; } @keyframes slide-transform { from {transform: translatex(0);} 50% {transform: translatex(300px);} to {transform: translatex(0);} }
The blue one is animated using the margin-left property, not a transform:
.walkabout-old-school { animation: 3s slide-margin linear infinite; } @keyframes slide-margin { from {margin-left: 0;} 50% {margin-left: 100%;} to {margin-left: 0;} }
Kill switch
The kill button just pegs the CPU in a infinite loop for 2 seconds:
function kill() { var start = +new Date; while (+new Date - start < 2000){} }
Results
In non-supporting browsers, which is most of them, the kill switch kills all the animations. Business as usual.
In the supporting browsers (All Safaris and Andriod Chrome) the kill only affects the blue button, the one that animates a CSS property, as opposed to using a CSS transform. But the animations that use a transform keep on going!
Take aways
- Rejoice! The future is here! Drink and dance uncontrollably around the campfire!
- After you sober up, make sure your CSS animations use
transform:where possible - Keep migrating them JS animations to CSS
- Bug your browser vendor to support this
This entry was posted on Tuesday, March 12th, 2013 and is filed under CSS, performance. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
March 12th, 2013 at 3:26 am
Just to let you know that it works in Firefox OS like it works in Chrome. I think there is some support in Firefox but that isn’t enabled yet. I hope it will soon
March 12th, 2013 at 3:47 am
FYI, this is a work in progress for Firefox. It is already enabled in FirefoxOS but not yet on other platforms where there’s still some work to be done. You can read http://featherweightmusings.blogspot.fr/2013/02/throttling-off-main-thread-animations.html for more details.
March 12th, 2013 at 3:56 am
Stoyan, according to the specs, you could simplify your CSS3 keyframes this way:
@keyframes rotate {
to {transform: rotate(360deg);}
}
@keyframes slide-transform {
50% {transform: translatex(300px);}
}
@keyframes slide-margin {
50% {margin-left: 100%;}
}
I know teaching keyframes is not the purpose of this article, but using the above is much simpler and easier to maintain.
March 12th, 2013 at 4:08 am
Oddly the blue one still freezes in Chrome mobile.
March 12th, 2013 at 4:16 am
Hmm, in the current chrome (v25) just the blue one stops. Seems like this technique is very experimental…
March 12th, 2013 at 4:51 am
This is the best test of “transform” vs “left/right/margin”. Thanks!
March 12th, 2013 at 7:28 am
Could you somehow still control/target the individual “frames” from JavaScript without blocking the animation (still having it off UI thread)?
A usage example for this would be to have a complete page flip animation but (with certain scenarios) still be able to control it with mouse/touch. Lets say the complete animation is 20 frames long – so when “following” the mouse/finger and you want it to stop in the middle – you’d for example force it to go to frame 10.
I realise those are not “real” frames which makes interacting with it all the more difficult + yeah you could just directly manipulate position/transform but the question is if that would break the already “rendered” animation off the UI thread.
March 12th, 2013 at 8:18 am
@Stoyan, thank you for writing this!
@All, the Web Animations spec aims to cover your use case: https://dvcs.w3.org/hg/FXTF/raw-file/tip/web-anim/index.html Right now, there’s limited control over CSS Animations from JS and you will likely not get smooth results.
March 12th, 2013 at 3:13 pm
IE10 does the same on both Windows 8 Desktop and Windows RT on Surface (have not tested IE10 on Win7 no on Windows Phone 8).
Only the blue one stops on “kill”. So seems IE10 already puts animation off the UI thread
I do like IE10 more and more…
March 12th, 2013 at 6:17 pm
Seems like it’s not supported for desktop Chrome. All 3 boxes stop on Chrome 25.0.1364.172 and 27.0.1438.4 canary and prevent the page from scrolling down.
March 13th, 2013 at 10:46 am
It works as expected on on the default android browser as well (Samsung galaxy S3 – Android 4.1.2)
March 13th, 2013 at 10:53 am
Works on opera (beta – 14.0.1025.52315) on Android as well.
March 14th, 2013 at 7:17 am
Yeah, seems fine on Android but Chrome is throwing a googly. So much for its rapid development cycle! Oh well, it will catch on, but the wait for agreed standards and browser adoption always feels like an Aesop’s fable in slow motion.
March 19th, 2013 at 9:36 am
Hi, just wanted to tell you, I enjoyed this blog post. It was funny. Keep on posting!
Hi, I just wanted to tell you, you?re dead wrong. Your article doesn?t make any sense.
Hello, how?s it going? Just shared this post with a colleague, we had a good laugh.
Incredible points. Sound arguments. Keep up the great work.
This text is worth everyone?s attention. How can I find out more?
Highly energetic blog, I liked that a lot. Will there be a part 2?
Incredible story there. What happened after? Take care!
Do you have any video of that? I?d love to find out some additional information.
Informative article, just what I was looking for.
Hi there, I read your blogs on a regular basis. Your humoristic style is witty, keep it up!
Hi to every single one, it?s truly a good for me to visit this web page, it includes helpful Information.
I am truly pleased to read this website posts which carries lots of helpful data, thanks for providing these kinds of statistics.
This video post is actually great, the noise quality and the picture quality of this tape post is genuinely amazing.
Hi there to every body, it?s my first go to see of this web site; this weblog consists of awesome and in fact good stuff for visitors.
Hurrah, that?s what I was exploring for, what a stuff! existing here at this blog, thanks admin of this web site.
What?s up, every time i used to check blog posts here in the early hours in the break of day, for the reason that i enjoy to gain knowledge of more and more.
What?s up to every one, as I am in fact eager of reading this web site?s post to be updated regularly. It includes nice stuff.
I all the time emailed this website post page to all my friends, because if like to read it then my friends will too.
Can you please send by e-mail me the code for this script or please tell me in detail concerning this script?
Your method of explaining the whole thing in this post is in fact pleasant, every one be capable of effortlessly be aware of it, Thanks a lot.
Fine way of telling, and pleasant article to obtain facts about my presentation focus, which i am going to present in institution of higher education.
Hi, I desire to subscribe for this web site to obtain most up-to-date updates, so where can i do it please help.
Hi, after reading this awesome piece of writing i am as well delighted to share my familiarity here with colleagues.
Wonderful, what a blog it is! This webpage provides useful data to us, keep it up.
Hi all, here every person is sharing these kinds of know-how, so it?s nice to read this website, and I used to go to see this blog daily.
March 24th, 2013 at 9:56 pm
Hi there, I enjoy reading through your article post.
I like to write a little comment to support you.
My homepage – SP1800BL
March 25th, 2013 at 6:37 am
CSS animation is a good step forward – we will soon forgot that number of JS code and images required for basic animation on hover etc.
April 3rd, 2013 at 2:18 am
I slightly modified your test and added an animation using the “steps” API. I don’t know why but for some reason the animation isn’t rendered off the UI thread in canary / safari. See: https://gist.github.com/basecode/5298961/raw/7a7ba729b0f7ffa53e92a5f06ba6451ec0b3ef72/thread.html
April 4th, 2013 at 3:44 am
[...] appearing in Desktop Safari, iOS Safari, and Android Chrome, CSS transforms is no longer part of the UI thread, meaning such animations will not be affected by an overloaded CPU! Check-out the test page, I can [...]
April 15th, 2013 at 11:47 am
Perfect stuff for beginners
April 15th, 2013 at 5:29 pm
Generally I don’t learn article on blogs, but I would like to say that this write-up very pressured me to check out and do so! Your writing taste has been amazed me. Thank you, quite great post.