CSS animations off the UI thread

March 12th, 2013. Tagged: CSS, performance

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

  1. Rejoice! The future is here! Drink and dance uncontrollably around the campfire!
  2. After you sober up, make sure your CSS animations use transform: where possible
  3. Keep migrating them JS animations to CSS
  4. Bug your browser vendor to support this

Tell your friends about this post: Facebook, Twitter, Google+

30 Responses

  1. 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 ;)

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

  3. 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.

  4. Oddly the blue one still freezes in Chrome mobile.

  5. Hmm, in the current chrome (v25) just the blue one stops. Seems like this technique is very experimental…

  6. This is the best test of “transform” vs “left/right/margin”. Thanks!

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

  8. @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.

  9. 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…

  10. 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.

  11. It works as expected on on the default android browser as well (Samsung galaxy S3 – Android 4.1.2)

  12. Works on opera (beta – 14.0.1025.52315) on Android as well.

  13. 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.

  14. 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.

  15. Hi there, I enjoy reading through your article post.
    I like to write a little comment to support you.

    My homepage – SP1800BL

  16. 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.

  17. 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

  18. [...] 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 [...]

  19. Perfect stuff for beginners

  20. 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.

  21. [...] This is an interesting page. It talks about using pure CSS3 animations. They still freeze in Firefox though – maybe soon FF will fix this. Looks like I should be considering CSS for animation rather that using a GIF. [...]

  22. yes good

  23. you’re in reality a excellent webmaster. The site loading speed is incredible. It sort of feels that you’re
    doing any distinctive trick. In addition, The contents are
    masterpiece. you’ve performed a magnificent process in this matter!

  24. Plaque is more difficult to remove when the patient has high blood sugar, and periodontal disease causes complications controlling sugar levels.

  25. Maybe this is the beginning of a new way of coding animation into webpages. I see a pattern here that could lead to the foundation of something new in coding…

  26. […] This is an interesting page. It talks about using pure CSS3 animations. They still freeze in Firefox though – maybe soon FF will fix this. Looks like I should be considering CSS for animation rather that using a GIF. […]

  27. I am really enjoying the theme/design of your blog.
    Do you ever run into any browser compatibility problems?

    A number of my blog visitors have complained about my blog not operating
    correctly in Explorer but looks great in Firefox.
    Do you have any recommendations to help fix this problem?

  28. […] 1) http://www.phpied.com/css-animations-off-the-ui-thread/ […]

  29. Aw, this was an exceptionally good post. Taking a few minutes and actual effort to create a
    top notch article… but what can I say… I put things off a whole lot and never manage to get anything done.

  30. Nice tutorial!

Leave a Reply