Why is My CSS3 Transition Failing When I Change the Display Property?

CSS3 Transition Not Working with Display Property

Question:

Why does CSS3 transition fail to function when the display property is modified?

Answer:

When the display property is set to "none," the entire block element is effectively hidden, preventing any transition effects. Alternatively, using opacity allows for fading effects and smoother transitions.

Alternative CSS Solution:

To achieve a smooth transition effect, manipulate the opacity, height, and padding properties instead:

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;
}

#header #button > .content {
  opacity: 0;
  height: 0;
  padding: 0 8px;
  overflow: hidden;
  transition: all .3s ease .15s;
}

Working Demo:

[Fiddle](https://jsfiddle.net/alexdocker/KAyvL/)

Additional Notes:

• Vendor prefixes have been omitted for brevity.
• You can also consider adjusting border-radius to create a more subtle transition effect.
• Refer to this [SO discussion](https://stackoverflow.com/questions/13691003/displaynone-css3-transition) for similar insights.

The above is the detailed content of Why is My CSS3 Transition Failing When I Change the Display Property?. For more information, please follow other related articles on the PHP Chinese website!