Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

CSS can FINALLY animate height: auto!

Wes Bos

435,954 subscribers

323,333 views • 1 year ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

jhey ▲🐻🎈1 year ago

Related 🤙

hārmañ1 year ago

Next: animate display none

Wes Bos1 year ago

Already possible! starting-style does this:

Julian Domke1 year ago

whoever works on css should get 10 raises. frontend frameworks get more and more complicated, css just gets more useful. thanks for keeping us informed! 🥳

jeffscottworld (🛠️, 🤖, 🏡 )1 year ago

Holy hell lol I don’t even believe it

Hunter Becton1 year ago

What's causing the bounce at the end of the animation?

Wes Bos1 year ago

custom bezier curve that goes past 1, so it bounces back. transition: height 0.5s cubic-bezier(1, 0.63, 0.25, 1.5);

Cyrus Zei1 year ago

Yes !! Here we go!! I can finally make accordions that actually look like they where made in 2024 and not 1990 called and wanted their accordion back 😂

ProEvilz1 year ago

we have been waiting for this every since $.slideDown()

Avi Cohen Nehemia1 year ago

Wasn't this already possible for a while now? @KevinJPowell covered something similar a year ago

Related Videos

¡NUEVO en CSS! Anima height a auto

¡NUEVO en CSS! Anima height a auto

Miguel Ángel Durán

36,041 views • 1 year ago

¡NUEVO en CSS! Por fin podrás animar el height a auto. Con una sola línea más en tu código ↓

¡NUEVO en CSS! Por fin podrás animar el height a auto. Con una sola línea más en tu código ↓

Miguel Ángel Durán

58,829 views • 1 year ago

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,127 views • 1 year ago

You can animate auto height of any div using a simple div wrapper. - It uses Resize Observer to monitor when the content inside changes size. - Really simple wrapper. here's how 👇

You can animate auto height of any div using a simple div wrapper. - It uses Resize Observer to monitor when the content inside changes size. - Really simple wrapper. here's how 👇

preet

14,050 views • 10 months ago

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

jhey ʕ•ᴥ•ʔ

216,460 views • 1 year ago

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,831 views • 1 year ago

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

114,785 views • 8 months ago

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

jhey ʕ•ᴥ•ʔ

117,444 views • 1 year ago

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,170 views • 2 years ago

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

jhey ʕ•ᴥ•ʔ

134,905 views • 1 year ago

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jhey ʕ•ᴥ•ʔ

118,158 views • 8 months ago

finally starting to animate bigger enemies, hurt sprites included.

finally starting to animate bigger enemies, hurt sprites included.

a bottle of vinegar

42,893 views • 3 years ago

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,034 views • 1 year ago

Added auto-animate support to the new scroll mode. Now every reveal.js deck out there can also be a scroll-animated website 🪄

Added auto-animate support to the new scroll mode. Now every reveal.js deck out there can also be a scroll-animated website 🪄

Hakim El Hattab

32,878 views • 2 years ago

why can i animate

why can i animate

Sendo。

15,693 views • 1 year ago

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

495,420 views • 2 years ago

When wit studio finally have the freedom to animate what they want

When wit studio finally have the freedom to animate what they want

jass

24,694 views • 2 months ago

I can FINALLY post my boards and animation from this episode! I got to animate on this entire first scene with Bill, Fillmore, and Duncan #Smilingfriends

I can FINALLY post my boards and animation from this episode! I got to animate on this entire first scene with Bill, Fillmore, and Duncan #Smilingfriends

David Hootselle (Shigloo)

310,070 views • 2 years ago

Can you tell CSS from BS? Can you beat my score?

Can you tell CSS from BS? Can you beat my score?

Firefox for Web Developers

37,166 views • 2 months ago