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

Web Dev Simplified

Animating height:auto in CSS has always been a challenge, often requiring JavaScript hacks. However, new CSS features like the calc size function and the starting style property make it much easier to create smooth transitions without excessive JavaScript. These properties help developers create better animations and transitions, even if their browser support is still limited. Progressive enhancement ensures older browsers still function correctly, albeit without the animations.

We Can Finally Animate height: auto; in CSS!

finally we could get rid of those JS scripts just to dynamically calculate height

This is why any self-respecting frontend dev uses UI libraries with pre-made components

This used to be the most annoying thing to animate back in the day. Some animation libraries have made it easier, but really nice to see it finally baked into CSS!

This is something beneficial in case of even animating the display property, I used to use JQuery animate function for those and by watching your video I can do animate them without JQuery animate function