Animate to "height: auto;" & "display: none;" Using CSS Transitions
Find out how to easily transition from “height: 0;” to “height: auto;”.
Find out how to easily transition from height: 0; to height: auto; and display: none; to display: block; without any hacks, tricks, or JavaScript, using only new CSS features: calc-size() function, transition-behavior property and @starting-style at-rule.
UPDATE
The calc-size() function no longer supports a single argument; it works only as a two-argument form. The first argument is the basis, and the second argument is the calculation, where the passed basis argument is available as the size keyword. So all examples in the video should be calc-size(auto, size) instead of calc-size(auto).
Chapters
- 00:00 About CSS transitions & demo setup
- 01:26 How to transition to height: auto;
- 04:06 How to transition from display: none
- 04:43 How transition-behavior CSS property works
- 06:32 How @starting-style at-rule works
- 08:34 Browser support for transition-behavior & @starting-style
