Discussion on: Dynamizing your webite with CSS animations

[Taimoor Sattar]

How would you transition display: none and display: block property in CSS to animate in smooth. If not, what do you think the alternative solution for that?

[Médéric Burlet]

In what sense ? many html items can be displayed in block could you give a simplified version of your html?

[Taimoor Sattar]

How to transition to show item 1,2,3 in nav in a smooth fashion. this pen.

[Médéric Burlet]

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

[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

[Médéric Burlet]

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

[Taimoor Sattar]

Great..

[Krushnakant Sadiya]

Thanks, man Your Code was helped on my blog I was Applied on Show and Hide Table of Content.