Why Does the CSS "transition" Property Not Work With "display: none"?

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:


<div id="hidden-element">Foo</div>


#hidden-element {
  opacity: 0;
  transition: opacity 0.5s ease;

#hidden-element:hover {
  opacity: 1;

Hope you found this post useful. It was published . Please show your love and support by sharing this post.