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.8k

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.1k
Building Motion Detecting Web Apps with JavaScript
lonekorean
0
400

Other Decks in Technology

See All in Technology
サイバーセキュリティと認知バイアス：対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
110
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
第1回 国土交通省 データコンペ参加者向け勉強会③ - Snowflake x estie編 -
estie
0
120
これまでの計測・開発・デプロイ方法全部見せます！ / Findy ISUCON 2024-11-14
tohutohu
3
360
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
200
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
Lambdaと地方とコミュニティ
miu_crescent
2
360
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
誰も全体を知らない ～ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
TypeScript、上達の瞬間
sadnessojisan
46
13k

Featured

See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
Ruby is Unlike a Banana
tanoku
97
11k
Fireside Chat
paigeccino
34
3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Building an army of robots
kneath
302
43k
Embracing the Ebb and Flow
colly
84
4.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720

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!