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:

HTML:

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

CSS:

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

#hidden-element:hover {
  opacity: 1;
}