Why Don't CSS Transitions Work with Visibility?

CSS Transitions and Visibility: A Property Inconundrum

When working with CSS transitions, you may encounter situations where certain properties seem to transition smoothly, while others, such as visibility, prove problematic. To understand this behavior, let's delve into the nature of transitions.

Transitions rely on transitioning between two distinct values. Properties with numerical values like opacity allow for the calculation of keyframes and interpolation between values. However, properties like visibility operate on a binary setting (visible/hidden).

In the case of visibility, browsers interpret the transition duration as a delay on hover out. This is not a bug but a consequence of the inability to interpolate between hidden and visible states. The delayed transition effect occurs because the browser waits until the end of the duration before abruptly switching the visibility state.

In contrast, opacity transitions work as expected because the property's numeric values allow for smooth interpolation. The opacity value gradually transitions from 0 to 1, creating a smooth fading effect.

To animate visibility properties, consider using opacity or other transitionable measurement properties (e.g., height, width) as a proxy for visibility. For example, you could use a transition on height and set the height to 0 for a "hidden" state and a nonzero value for a "visible" state.

The above is the detailed content of Why Don't CSS Transitions Work with Visibility?. For more information, please follow other related articles on the PHP Chinese website!