We Can Finally Animate height: auto; in CSS!

CSS animations have gotten much better over time, but one thing that has always been a pain is animating to an auto size such as height. This is now a problem of the past, though, thanks to the new calc-size() CSS function. This single CSS function allows you to do some really cool stuff with animations and automatically makes auto sized animations work with no other code changes. On top of that there are a few other incredible new CSS animation features such as @starting-style and transition-behavior that I cover in this video.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:36 - The Problem
02:03 - calc-size
03:38 - @starting-style
07:27 - transition-behavior

#CSS #WDS #CSSAnimation

[nekomew]

Finally! No more max-height or single column grids to get accordion to work.

[iamfastre]

wow, new cool css features! can’t wait to use them in 2034

[vanechka]

Nice, now everyone who downloads Canary and enables the experimental flag will be able to see my animations

[omariyassinee]

It's like CSS is slowly becoming a programming language: 3

[popopp]

It's funny how when I first started watching your videos I was listening and not fully understanding what you were teaching.. Now it all makes sense. Thank you for your amazing videos!

[abhayekanath]

Try adding 'interpolate-size: allow-keywords;' to the Body or root

div p {
position: relative;
height: 100px;
overflow: hidden;
interpolate-size: allow-keywords;
transition: height 0.5s ease;
}
div :hover p {
height: auto;
}

[lucasfranco]

I was just trying to do this a couples of hours ago, im so glad we can finally do this :)

[dubemdesign]

Wow, now I need to update all my accordian & FAQ components. Thanks

[teodordimitrov]

This is really amazing . Thank you for the great video.

[Xeratas]

There are some realy good solutions to this already using grid, but having this out of the box is amazing.

[SebastianZartner]

The support info on @starting-style is a little bit outdated. Firefox has support for it starting in version 129. Unfortunately, it does not yet support transitions to and from `display: none;` which is probably one of the main use cases for it. Caniuse is now also updated to reflect that.

[Malvitima]

This are great new features and will turn the styling animation process more ease to do.

[Kay_Drechsler]

Waited for over 10 years to have this feature. Finally it's there.

[keviincosmos]

CSS grid is a great way, and fully supported.

[kueifengtung]

Amazing video ty Kyle. You should make a video announcement when these features go online with a callback to this video

[herveelec]

good job, in html use <details> and <summary>

[alexeyshaykov]

OMG!!!! Been waiting for this for 10 years while I've been working! Thanks Kyle!

[somewonderfulguy]

I am FE dev since 2011. What I use for animating height this days is react-spring. But regarding CSS auto height I can say only this: at last!

[PicSta]

I would move things like calc-size() into an @supports rule. This gives you the chance to design both states independently (if you want to be very specific). Well explained video and I can't await browser support will be better.

[ahassan]

I've been waiting for this feature since I was in high school.