We Can Finally Animate height: auto; in CSS!

CSS calc-size() Article: https://blog.webdevsimplified.com/2024-07/css-calc-size//?utm_source=youtube&utm_medium=video-description&utm_term=video-id-qFVtSAK8H44

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:

CSS calc-size() Article: https://blog.webdevsimplified.com/2024-07/css-calc-size//?utm_source=youtube&utm_medium=video-description&utm_term=video-id-qFVtSAK8H44 Animation Crash Course Video: https://youtu.be/YszONjKpgg4 Animation Fill Mode Article: https://blog.webdevsimplified.com/2020-03/animation-fill-mode//?utm_source=youtube&utm_medium=video-description&utm_term=video-id-qFVtSAK8H44

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified

⏱️ Timestamps:

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

#CSS #WDS #CSSAnimation ... https://www.youtube.com/watch?v=qFVtSAK8H44