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
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
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.