When you set the CSS height
property to auto
, the height of the element is determined by its content, which can vary dynamically based on the content changes or browser window resizing. In order to animate the height of an element, the browser needs to calculate intermediate values between the starting and ending height values during the transition states. This calculation is not possible with height: auto
because it does not have a fixed value that can be interpolated or calculated during the transition.
In fact, as per its formal definition, only the following value types are animatable for the height
property:
- length;
- percentage, or;
calc()
.
As you can see, "auto
" is not a valid animatable value type for the height
property, and can, thus, not be used with the CSS transition
property.
On the other hand, if you specify a fixed height value (such as height: 100px
), the browser can easily calculate intermediate values during the transition, and the animation will look smooth and consistent.
Therefore, to work around this limitation, you can do any of the following instead:
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.