loading...

Discussion on: Dynamizing your webite with CSS animations

Collapse
crimsonmed profile image
Médéric Burlet Author

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

Collapse
taimoorsattar7 profile image
Taimoor Sattar

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

Thread Thread
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
Collapse
sadiakant profile image
Krushnakant Sadiya

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