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

Other Decks in Technology

See All in Technology
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
420
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
23
11k
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
540
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
非機能品質を作り込むための実践アーキテクチャ
knih
3
700
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
180
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
250
アップデート紹介：AWS Data Transfer Terminal
stknohg
PRO
0
170
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
300
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
210
レンジャーシステムズ | 会社紹介（採用ピッチ）
rssytems
0
150

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing for humans not robots
tammielis
250
25k
Scaling GitHub
holman
458
140k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Designing for Performance
lara
604
68k
Faster Mobile Websites
deanohume
305
30k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Speed Design
sergeychernyshev
25
670

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!