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. SILKY SMOOTH ANIMATION WITH CSS WILL BOYD !/lonekorean

  2. The opposite of silky smoothness (a bad thing)

  3. " 60 frames per second 16.7 ms per frame

  4. LOADING RENDERING PAINTING DISPLAYING

  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>
  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>
  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
  8. RENDERING PAINTING DISPLAYING <html> <head> <title> <body> <div> <h1> <p>

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

    • match style rules to elements • calculate animated values Calculate Styles
  10. RENDERING PAINTING DISPLAYING <html> <head> <title> <body> <div> <h1> <p>

  11. RENDERING PAINTING DISPLAYING <html> <body> <div> <h1> <p>

  12. RENDERING PAINTING DISPLAYING <html> <body> <div> <p>

  13. RENDERING PAINTING DISPLAYING <html> <body> <div> <p> text text

  14. RENDERING PAINTING DISPLAYING <html> <body> <div> <p> text text

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

    calculate geometry • width, height, position, etc. Layout
  16. RENDERING PAINTING DISPLAYING <html> <body> <div> <p> text text •

    calculate geometry • width, height, position, etc. Layout ELEMENT ANOTHER ELEMENT
  17. RENDERING PAINTING DISPLAYING <html> <body> <div> <p> text text •

    calculate geometry • width, height, position, etc. Layout ELEMENT ANOTHER ELEMENT
  18. drawRect()
 drawText() G PAINTING DISPLAYING (draw calls) drawCircle()

  19. drawRect()
 drawText() G PAINTING DISPLAYING (rasterization) (draw calls) drawCircle()

  20. G PAINTING DISPLAYING RENDERER PROCESS COMPOSITOR THREAD MAIN THREAD RASTER

    THREADS
  21. G DISPLAYING RENDERER PROCESS COMPOSITOR THREAD MAIN THREAD RASTER THREADS

    GPU PROCESS GPU THREAD
  22. SUCCESS!*

  23. LOADING RENDERING PAINTING DISPLAYING

  24. RENDERING PAINTING DISPLAYING

  25. RENDERING PAINTING DISPLAYING

  26. RENDERING PAINTING DISPLAYING

  27. LESS WORK MORE SMOOTH

  28. REFLOWS • caused by changes in geometry • easily causes

    chain reactions width height
 margin padding
 top bottom
 left right 
 font-size and more... #
  29. • forces pixels to be redrawn color background-color
 box-shadow background-position


    border-radius and more... REPAINTS #
  30. • no reflows, no repaints • extremely efficient transform filter*

    opacity GPU ACCELERATED $ *except for blur and drop-shadow
  31. DEMO TIME SWIMMING FISH

  32. DEMO TIME SWIMMING FISH <div> ::before ::after

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


    }
 @keyframes swim {
 0%, 100% { left: -200px; }
 50% { left: 200px; }
 }
  34. .fish {
 animation: swim 8s infinite;
 }
 @keyframes swim {


    0%, 100% { transform: translateX(-200px); }
 50% { transform: translateX(200px); }
 } DEMO TIME SWIMMING FISH
  35. DEMO TIME FISH PARTY × 1000

  36. None
  37. DEMO TIME ALTERNATIVES

  38. DEMO TIME BONUS EFFECTS

  39. Everything keeps getting better!

  40. None
  41. animation-workshop.herokuapp.com

  42. WILL BOYD !/lonekorean THANKS!