Discussion on: Dynamizing your webite with CSS animations

crimsonmed profile image
Médéric Burlet Author

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: 1;
animation-fill-mode: forwards;

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

Thread Thread
taimoorsattar7 profile image
Taimoor Sattar

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

Thread Thread
crimsonmed profile image
Médéric Burlet Author

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

Thread Thread
taimoorsattar7 profile image