Why CSS display Cannot Be Animated Directly
The CSS display property cannot be animated using transitions or keyframe animations. This is because display determines the fundamental box type and layout participation of an element, and browsers cannot interpolate between two display states.
display: none→display: blockor any other value changes the element instantly; no smooth transition occurs.CSS transitions only work on properties that can be interpolated numerically or smoothly over time, such as
opacity,width,height,transform, etc.To create a visual hide/show effect, use
opacityorvisibilityalong withheightormax-heightto animate elements smoothly.After a transition completes, you can then toggle
displayvia JavaScript to remove the element from layout if needed.
In this example, the element fades in and out smoothly using opacity. If display were toggled directly, the element would appear or disappear instantly without any transition.
Use
opacityorvisibilityfor smooth show/hide animations.Combine
max-heightortransformfor more complex expanding/collapsing effects.Use
displayin JavaScript only after a transition ends to remove the element from the layout completely.Test accessibility when hiding elements; use visually hidden techniques instead of
display: nonewhen content must remain available to screen readers.