$30 off During Our Annual Pro Sale. View Details »

Silky Smooth Animation with CSS

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.

Will Boyd

September 26, 2016
Tweet

More Decks by Will Boyd

Other Decks in Technology

Transcript

  1. SILKY SMOOTH
    ANIMATION WITH CSS
    WILL BOYD !/lonekorean

    View Slide

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

    View Slide

  3. "
    60
    frames per second
    16.7 ms per frame

    View Slide

  4. LOADING RENDERING PAINTING DISPLAYING

    View Slide

  5. LOADING RENDERING PAINTING DISPLAYING



    Hello World!




    Welcome

    Stay a while…











    View Slide

  6. LOADING RENDERING PAINTING DISPLAYING



    Hello World!




    Welcome

    Stay a while…











    View Slide

  7. LOADING RENDERING PAINTING DISPLAYING






    • Create the DOM
    (document object model)
    • Tree representation of all
    elements in the document

    View Slide

  8. RENDERING PAINTING DISPLAYING






    View Slide

  9. RENDERING PAINTING DISPLAYING






    • match style rules to elements
    • calculate animated values
    Calculate Styles

    View Slide

  10. RENDERING PAINTING DISPLAYING






    View Slide

  11. RENDERING PAINTING DISPLAYING




    View Slide

  12. RENDERING PAINTING DISPLAYING




    View Slide

  13. RENDERING PAINTING DISPLAYING




    text text

    View Slide

  14. RENDERING PAINTING DISPLAYING




    text text

    View Slide

  15. RENDERING PAINTING DISPLAYING




    text text
    • calculate geometry
    • width, height, position, etc.
    Layout

    View Slide

  16. RENDERING PAINTING DISPLAYING




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

    View Slide

  17. RENDERING PAINTING DISPLAYING




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

    View Slide

  18. drawRect()

    drawText()
    G PAINTING DISPLAYING
    (draw calls)
    drawCircle()

    View Slide

  19. drawRect()

    drawText()
    G PAINTING DISPLAYING
    (rasterization)
    (draw calls)
    drawCircle()

    View Slide

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

    View Slide

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

    View Slide

  22. SUCCESS!*

    View Slide

  23. LOADING RENDERING PAINTING DISPLAYING

    View Slide

  24. RENDERING PAINTING DISPLAYING

    View Slide

  25. RENDERING PAINTING DISPLAYING

    View Slide

  26. RENDERING PAINTING DISPLAYING

    View Slide

  27. LESS WORK
    MORE SMOOTH

    View Slide

  28. REFLOWS
    • caused by changes in geometry
    • easily causes chain reactions
    width height

    margin padding

    top bottom

    left right 

    font-size and more...
    #

    View Slide

  29. • forces pixels to be redrawn
    color background-color

    box-shadow background-position

    border-radius and more...
    REPAINTS #

    View Slide

  30. • no reflows, no repaints
    • extremely efficient
    transform filter* opacity
    GPU ACCELERATED $
    *except for blur and drop-shadow

    View Slide

  31. DEMO TIME
    SWIMMING FISH

    View Slide

  32. DEMO TIME
    SWIMMING FISH

    ::before ::after

    View Slide

  33. DEMO TIME
    SWIMMING FISH
    .fish {

    animation: swim 8s infinite;

    }

    @keyframes swim {

    0%, 100% { left: -200px; }

    50% { left: 200px; }

    }

    View Slide

  34. .fish {

    animation: swim 8s infinite;

    }

    @keyframes swim {

    0%, 100% { transform: translateX(-200px); }

    50% { transform: translateX(200px); }

    }
    DEMO TIME
    SWIMMING FISH

    View Slide

  35. DEMO TIME
    FISH PARTY
    × 1000

    View Slide

  36. View Slide

  37. DEMO TIME
    ALTERNATIVES

    View Slide

  38. DEMO TIME
    BONUS EFFECTS

    View Slide

  39. Everything keeps getting better!

    View Slide

  40. View Slide

  41. animation-workshop.herokuapp.com

    View Slide

  42. WILL BOYD !/lonekorean
    THANKS!

    View Slide