animation-iteration-count will make sure it runs only once. animation-fill-mode will make sure that the last value in the animation is the last one kept opacity:1
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
How to transition to show item 1,2,3 in nav in a smooth fashion. this pen.
Well the problem is CSS animations cant be applied to the display property.
However you can simply use opacity.
This pen
the importance is to make sure that show also adds
opacity:0;
so that there is no flash of the div.We then use:
animation-iteration-count
will make sure it runs only once.animation-fill-mode
will make sure that the last value in the animation is the last one keptopacity:1
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
flex
You can easily get a very fluid height movement for instance:
flex pen
Great..