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

438,999 subscribers

323,592 views • 2 years ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

jhey ▲🐻🎈2 years ago

Related 🤙

hārmañ2 years ago

Next: animate display none

Wes Bos2 years ago

Already possible! starting-style does this:

Julian Domke2 years 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 (🛠️, 🤖, 🏡 )2 years ago

Holy hell lol I don’t even believe it

Hunter Becton2 years ago

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

Wes Bos2 years 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 Zei2 years 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 😂

ProEvilz2 years ago

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

Avi Cohen Nehemia2 years 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,865 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,170 views • 2 years 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,567 views • 2 years 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,909 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

119,817 views • 10 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,591 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,348 views • 2 years 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,488 views • 11 months 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,063 views • 2 years 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

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,705 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,956 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,962 views • 5 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,227 views • 5 months ago