Hey, I have a question.. How do you animate in CSS when switching from display: none
to let's say display: block . To get around this I used to use visibility instead. But the problem with visibility is that the element still takes place even that it's hidden to the user and that's not what I want...
Thanks for viewing my solution ^^
@FarisPalayi
Posted
Yes, @claudiabdm is right. You can't animate the display property.
But, you could give a delay before display: none; and run whatever animation you want to run before the delay with the help of the setTimeout() method using javascript.
Marked as helpful
@tarek-mo
Posted
@FarisPalayi this could actually work. Thanks friend!
@claudiabdm
Posted
Hi!
I think there is no possible way to animate from display: none to any other display value only with CSS so you could try with the height property.
You can check this codepen I made with a very simple example: https://codepen.io/claudiabdm/pen/ExWBpZX.
Hope it helps!
@tarek-mo
Posted
@claudiabdm Yea the height could work but i wanted to animate the opacity , I think I have to use an animation library or something..
Thanks though
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
