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

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
8.1k
Building Motion Detecting Web Apps with JavaScript
lonekorean
0
370

Other Decks in Technology

See All in Technology
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
本当のAWS基礎
toru_kubota
0
500
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
160
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
340
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.3k
Databricks における 『MLOps』
databricksjapan
2
170
生産性向上チームの紹介
cybozuinsideout
PRO
1
860
JSON攻略法.pdf
miyakemito
8
4.9k
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
120
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
4
4.7k
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
830

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Code Reviewing Like a Champion
maltzj
514
39k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
It's Worth the Effort
3n
180
27k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k

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!