The CSS transition
property does not work with display: none
because the display
property is not an animatable property. Animatable properties are those that can change their value over time, creating a smooth transition or animation effect.
However, you can work around this limitation by using other CSS properties that are animatable.
For example, to create a fade-in effect, you could set the opacity
of the element to 0
to hide it initially, and then transition it to 1
when you want to show it:
HTML:
<div id="hidden-element">Foo</div>
CSS:
#hidden-element { opacity: 0; transition: opacity 0.5s ease; } #hidden-element:hover { opacity: 1; }
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.