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

When jQuery and CSS3 Collide

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Louis Lazaris Louis Lazaris
March 02, 2013
Programming
4.5k
6

When jQuery and CSS3 Collide

Some tips, techniques, and resources to help our tools work well together, with a specific focus on CSS3 transitions and animation.

Avatar for Louis Lazaris

Louis Lazaris

March 02, 2013

More Decks by Louis Lazaris

See All by Louis Lazaris
DOM Features You Didn't Know Existed
Avatar for Louis Lazaris impressivewebs
5
1.1k
Front-end Tools: Sifting Through the Madness
Avatar for Louis Lazaris impressivewebs
3
5k

Other Decks in Programming

See All in Programming
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
Avatar for hadashiA hadashia
2
550
Surviving Black Friday: 329 billion requests with Falcon!
Avatar for Samuel Williams ioquatix
0
350
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
Avatar for akase244 akase244
0
1.4k
NakouPAY説明用
Avatar for Annouim0 annouim0
0
240
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
3
160
アクセシビリティ試験の"その後"を仕組み化する
Avatar for yuuumin yuuumiravy
0
150
forteeの改修から振り返るPHPerKaigi 2026
Avatar for muno92 muno92
PRO
3
290
JOAI2026 1st solution - heron0519 -
Avatar for heron0519 heron0519
0
140
GitHubCopilotCLIをはじめよう.pdf
Avatar for tkym htkym
0
200
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
770
tRPCの概要と少しだけパフォーマンス
Avatar for Keigo Ebihara misoton665
2
210
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
150

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.4k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
290
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
320
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.3k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
580
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
290
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
450

Transcript

  1. When jQuery & CSS3 Collide by Louis Lazaris

  2. Who is This Guy?

  3. www.impressivewebs.com

  4. None

  5. I’ve Helped With...

  6. I Write...

  7. I Build...

  8. How I Feel

  9. The Front-end

  10. They Work Together

  11. Nobody wants this...

  12. Or This...

  13. Certainly Not This...

  14. But Together...

  15. Two Technologies

  16. Take-Away Concepts > Think Modular

  17. Take-Away Concepts > Think Modular > Learn the Subtleties

  18. Animation in jQuery > Uses .animate() > Or .fadeIn(), .slideUp(),

    etc

  19. Animation in jQuery

  20. Animation in jQuery

  21. Often Unnecessary?

  22. Often Unnecessary?

  23. The Alternative

  24. The CSS

  25. One Benefit of .animate()

  26. Use ‘transitionend’

  27. With Modernizr.prefixed()

  28. ‘transitionend’ on MDN

  29. Use ‘animationend’

  30. With Modernizr.prefixed()

  31. ‘animationend’ on MDN

  32. Web Animations 1.0

  33. Web Animations 1.0

  34. Defining App States

  35. Fresh Counting Done <html class="fresh"> htmlElement.className = 'counting'; htmlElement.className =

    'done'; Defining App States

  36. Defining App States

  37. None
  38. None

  39. Using Animate.css

  40. Using Animate.css

  41. Using Animate.css

  42. Options... > Use Existing Tools/Libraries > Build Your Own Reusable

    Modules

  43. Benefits? > Modular > Easier to Maintain

  44. Using CSS3 Transitions and Animations More Often...?

  45. How Are CSS3 Transitions Triggered?

  46. A Simple Transition

  47. What Triggers It?

  48. What Triggers It?

  49. This (kind of) means... Event  State Change State Change

     Transition

  50. How Does State Change? > :hover > :active > :focus

  51. How Does State Change? > :checked > :disabled > @media

  52. None

  53. Different Transitions on/off

  54. Different Transitions on/off

  55. Different Transitions on/off

  56. Different Transitions on/off

  57. Different Transitions on/off

  58. More Transition Subtleties...

  59. None
  60. None
  61. None
  62. None

  63. 1 Floated Boxes

  64. Increase Width & Height?

  65. 1 Causes Reflow

  66. Scale Transform?

  67. 1 1 Does Not Cause Reflow

  68. None

  69. Things That Are Out of the Flow... > Text shadows

    > Box shadows > display: none

  70. > position: absolute > position: fixed Things That Are Out

    of the Flow...

  71. > position: absolute > position: fixed > “position: relative” offsets

    Things That Are Out of the Flow...

  72. 1 Floated Boxes

  73. “position: relative” offsets 1

  74. > Outlines > Transform offsets (scale, skew, rotate, translate) Things

    That Are Out of the Flow...

  75. > Know your tools > Use them effectively What Does

    it Mean?

  76. Performance is King

  77. Jank Busters (video/slides)

  78. Ariya Hidayat (video/slides)

  79. Link Dump http://tinyurl.com/jquery-toronto

  80. Thank You! @ImpressiveWebs