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

When jQuery and CSS3 Collide

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Louis Lazaris Louis Lazaris
March 02, 2013
Programming
6
4.4k

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
Tweet

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
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
670
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
220
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
130
Best-Practices-for-Cortex-Analyst-and-AI-Agent
Avatar for ryotaro.ikeda@finatext.com ryotaroikeda
1
100
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.5k
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
430

Featured

See All Featured
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
90
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
730
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
250
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
48
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
230

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