Transition and animation property in CSS works well with transform and opacity property in CSS. HTML page sees the content exist there and then apply the smooth animation.
But it does not show smooth animation when we change height: 0, to height: 50px, or display: none to block: none. What CSS property can cause this effect to make? this pen
Transition and animation property in CSS works well with transform and opacity property in CSS. HTML page sees the content exist there and then apply the smooth animation.
But it does not show smooth animation when we change height: 0, to height: 50px, or display: none to block: none. What CSS property can cause this effect to make? this pen
As I said CSS animations don't apply to style.
There are too possibilities for your issue.
First one using
scaleY. You can simply transform the scaling of the Y axis in the animation like this:scaleY Pen
This however is still not smooth if you have text at the bottom.
The best I would recommend is using
flexYou can easily get a very fluid height movement for instance:
flex pen
Great..