Why Doesn't CSS3 Transition Work with the Display Property?

CSS3 Transition Doesn't Work with Display Property

In CSS, the display property defines whether an element is displayed or not. When an element is set to display: none, it is removed from the document flow, meaning that it takes up no space and is not visible. This makes it impossible to use CSS transitions to animate the appearance or disappearance of an element with display: none.

To achieve a smooth fade-in effect for a hidden element, the display property should not be used. Instead, the opacity property can be used to change the transparency of the element. The following CSS code demonstrates how to use the opacity property to create a fade-in effect:

#header #button:hover .content {
  opacity: 1;
  transition: opacity 0.3s ease 0.15s; /* Vendor prefixes omitted for brevity. */
}

#header #button .content {
  opacity:0;
}

In this code, the opacity of the hidden element is set to 0 when the #header #button element is not hovered over. When the #header #button element is hovered over, the opacity of the hidden element is set to 1, revealing it with a smooth fade-in effect.

The above is the detailed content of Why Doesn't CSS3 Transition Work with the Display Property?. For more information, please follow other related articles on the PHP Chinese website!