Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Silky Smooth Animation with CSS

Will Boyd
September 26, 2016
Technology
5
2.9k

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

See All by Will Boyd
Exploring 2D Physics in JavaScript
lonekorean
1
9.8k
Building Motion Detecting Web Apps with JavaScript
lonekorean
0
440

Other Decks in Technology

See All in Technology
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
1
310
技術者はかっこいいものだ！！～キルラキルから学んだエンジニアの生き方～
masakiokuda
2
280
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
620
「経験の点」の位置を意識したキャリア形成 / Career development with an awareness of the “point of experience” position
pauli
4
110
QA/SDETの現在と、これからの挑戦
imtnd
0
150
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう！
o11yfes2023
0
190
PostgreSQL Log File Mastery: Optimizing Database Performance Through Advanced Log Analysis
shiviyer007
PRO
1
140
Writing Ruby Scripts with TypeProf
mame
0
370
【Λ（らむだ）】最近のアプデ情報 / RPALT20250422
lambda
0
120
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
800
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
800
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
250

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Being A Developer After 40
akosma
91
590k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Embracing the Ebb and Flow
colly
85
4.7k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Statistics for Hackers
jakevdp
798
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
For a Future-Friendly Web
brad_frost
177
9.7k
Docker and Python
trallard
44
3.3k

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!