CSS Animations

Did you know that you can speed up your web animations by using CSS instead of JavaScript? I'll step through a few common UI components that receive a performance boost from CSS, some additional tips for optimizing, and also what to avoid.

First presented Feb 24, 2014 @ Toronto Web Performance Group (http://www.meetup.com/Toronto-Web-Performance-Group/events/163138792/)

Transcript

1. TWITTER @PearlChen GOOGLE+ klab.ca/+ P E A R L C H E N C S S A n i m a t i o n s TO R O N T O W E B P E R F O R M A N C E G R O U P ( # t o w e b p e r f )
2. Te c h n o l o g i s t & E d u c a t o r I A M A … Karma Laboratory
3. b e t a . t e l u s . c o m F U L LY R E S P O N S I V E , M O B I L E F I R S T An aside: I wrote “There is no “I” in coding”: https://medium.com/better-humans/2e2ed4daeb99
4. H T M L To u c h S l i d e r C S S V S J AVA S C R I P T “This is the best mobile touch slider I’ve ever used. I’m trying to break it but I can’t!” ! - some guy at a Dribble meet up
5. j Q u e r y . a n i m a t e ( ) A N I M AT I O N S T H E J AVA S C R I P T WAY EXAMPLE 
 $('div').animate(  
                                    {left:  targetX},    //  properties
                                    200,                            //  duration
                                    ‘swing’,                    //  easing
                                    function  done(){}  //  callback
                                ); CSS 
 div  {
    position:  relative;  /*or  ‘fixed’  or  ‘absolute’,  just  not  ‘static’*/
    left:  0;
 }
6. GPU
 (graphics processing unit) • Specialized video and 3D graphics renderer. • Designed for doing repetitive screen updates (“paints”). • “Hardware accelerated”. CPU
 (central processing unit) • Controls all running computer software. • Better at making decisions and giving out orders. C P U v s G P U G E T T I N G S M O O T H A N I M AT I O N S
7. • General layout compositing • CSS3 transitions • CSS3 3D transforms • Canvas Drawing • WebGL 3D Drawing G E T T I N G S M O O T H A N I M AT I O N S W h a t c a n g o t o t h e G P U ? Further resources: 
 “Improving the Performance of your HTML5 App”: http://www.html5rocks.com/en/tutorials/speed/html5/
 “High Performance Animations": http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
 “Let’s Play With Hardware-Accelerated CSS“: http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
 “Why Moving Elements With Translate() Is Better Than Pos:abs Top/left”: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ ˒ CSS3 transitions (I’ve only got 30 minutes!)
8. C S S 3 Tr a n s i t i o n s A N I M AT I O N S T H E C S S WAY SCSS EXAMPLE 
 div  {
    @include  single-­‐transition(  left,  200ms,  
                                                              cubic-­‐bezier(0.39,  0.575,  0.565,  1)  );
 } CSS EXAMPLE 
 div  {
    -­‐webkit-­‐transition:  left  200ms  cubic-­‐bezier(0.39,  0.575,  0.565,  1);
    -­‐moz-­‐transition:        left  200ms  cubic-­‐bezier(0.39,  0.575,  0.565,  1);
    transition:                  left  200ms  cubic-­‐bezier(0.39,  0.575,  0.565,  1);
 } JQUERY (at the point you need the div animated) 
 $('div').css(  {left:  targetX}  );
          //  .addClass() (Note: vendor prefixes not required for latest browsers but use for optimal backwards and mobile compatibility.)
9. c u b i c - b e z i e r w h a t ? ? E A S I N G F U N C T I O N S Don’t fret! Just copy from easings.net and cubic-bezier.com:
10. j Q u e r y . a n i m a t e ( ) R E C A P Cons • Lower performance since animation will run in the CPU • Additional (easy to remember) easings require jQuery UI or other easing plugin Pros • Callback function for extra control when animation is done. • Very backwards compatible 
 (IE6 support with jQuery 1.9 or earlier)
11. Cons • Need to mix & match with JS events: • Might miss the animation on page load. • No CSS-only “transitionend” callback. • CSS keyframe animations can get hairy. • No IE9 support. Pros • No real CSS change from the JS version. • Automatically hardware accelerated. • CSS-only solution for :hover rollovers. R E C A P C S S 3 Tr a n s i t i o n s
12. B ro w s e r s u p p o r t C S S 3 T R A N S I T I O N S http://caniuse.com/#feat=css-transitions
13. Fe a t u r e d e t e c t i o n C S S 3 T R A N S I T I O N S For backwards compatibility, use Modernizr: JS 
 if  (Modernizr.csstransitions)  {
    $('.slider').css({left:targetX});
 }else{
    $('.slider').animate({left:targetX},  200);
 } CSS 
 .slider  {
    position:  relative;
    left:  0;
    transition:  left  200ms  
        cubic-­‐bezier(0.39,  0.575,  0.565,  1);
 }
 HTML 
 <div  class="slider">
    <ul><li>1</li><li>2<li>
    <li>3</li><ul>
 </div>
14. I s i t w o r t h t h e e f fo r t ? The proof is in the profiling*. * Too bad I’m not better at it!
 Instead I’m just going to show you the visual difference.
15. … w i t h m o r e a n i m a t i o n s A N OT H E R E X A M P L E pchen.github.io/telus-mobility-web-stats
16. D i s c o v e r U S B d e v i c e s C H R O M E R E M O T E D E B U G G I N G 1. Go to chrome:// inspect. 2. Check off 
 “Discover USB devices”. Minimum requirements: Chrome 32 for both Android and desktop
 More info: http://developer.chrome.com/devtools/docs/remote-debugging
17. S c r e e n c a s t C H R O M E R E M O T E D E B U G G I N G (…from previous slide) 1. Click “Inspect” for the tab you want to inspect. 2. In new popup, 
 click the screencast icon. 3. Anything you do on the phone will happen on the desktop, and vica versa!
18. TWITTER @PearlChen GOOGLE+ klab.ca/+ P E A R L C H E N T h a n k s ! Q U E S T I O N S ?