Silky Smooth Animation with CSS

D50888599a25e1653030109cfd0743f1?s=47 Will Boyd
September 26, 2016

Silky Smooth Animation with CSS

Watch this talk here: https://www.youtube.com/watch?v=bEoLCZzWZX8.

CSS animations can really help your web pages shine, but making them silky smooth requires finesse. This talk explains how browsers handle CSS animations, tips and tricks to optimize them, and the tools you can use to ensure top notch performance.

Demos from this talk are online here: http://animation-workshop.herokuapp.com.

All demo code is available here: https://github.com/lonekorean/animation-workshop.

D50888599a25e1653030109cfd0743f1?s=128

Will Boyd

September 26, 2016
Tweet

Transcript

  1. 5.

    LOADING RENDERING PAINTING DISPLAYING <!DOCTYPE html>
 <html>
 <head>
 <title>Hello World!</title>


    </head>
 <body>
 <div>
 <h1>Welcome</h1>
 <p>Stay a while…</p>
 </div>
 </body>
 </html> <html> <head> <title> <body> <div> <h1> <p>
  2. 6.

    LOADING RENDERING PAINTING DISPLAYING <!DOCTYPE html>
 <html>
 <head>
 <title>Hello World!</title>


    </head>
 <body>
 <div>
 <h1>Welcome</h1>
 <p>Stay a while…</p>
 </div>
 </body>
 </html> <html> <head> <title> <body> <div> <h1> <p>
  3. 7.

    LOADING RENDERING PAINTING DISPLAYING <html> <head> <title> <body> <div> <h1>

    <p> • Create the DOM (document object model) • Tree representation of all elements in the document
  4. 9.

    RENDERING PAINTING DISPLAYING <html> <head> <title> <body> <div> <h1> <p>

    • match style rules to elements • calculate animated values Calculate Styles
  5. 15.

    RENDERING PAINTING DISPLAYING <html> <body> <div> <p> text text •

    calculate geometry • width, height, position, etc. Layout
  6. 16.

    RENDERING PAINTING DISPLAYING <html> <body> <div> <p> text text •

    calculate geometry • width, height, position, etc. Layout ELEMENT ANOTHER ELEMENT
  7. 17.

    RENDERING PAINTING DISPLAYING <html> <body> <div> <p> text text •

    calculate geometry • width, height, position, etc. Layout ELEMENT ANOTHER ELEMENT
  8. 22.
  9. 28.

    REFLOWS • caused by changes in geometry • easily causes

    chain reactions width height
 margin padding
 top bottom
 left right 
 font-size and more... #
  10. 30.

    • no reflows, no repaints • extremely efficient transform filter*

    opacity GPU ACCELERATED $ *except for blur and drop-shadow
  11. 33.

    DEMO TIME SWIMMING FISH .fish {
 animation: swim 8s infinite;


    }
 @keyframes swim {
 0%, 100% { left: -200px; }
 50% { left: 200px; }
 }
  12. 34.

    .fish {
 animation: swim 8s infinite;
 }
 @keyframes swim {


    0%, 100% { transform: translateX(-200px); }
 50% { transform: translateX(200px); }
 } DEMO TIME SWIMMING FISH
  13. 36.
  14. 40.