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.

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