Why Does CSS Visibility Transition Not Work Like Opacity?

Transition Effects on CSS Visibility

Problem Introduction

Transition effects are commonly used in CSS to create smooth animations. However, issues arise when transitioning on certain properties, such as visibility. In this situation, the transition doesn't seem to work as expected, and the behavior differs from other properties like opacity.

Transition on Visibility vs. Opacity

In the provided example, a transition is applied to the visibility and opacity of an element:

For visibility:

#inner {
  visibility: hidden;
  transition: visibility 1000ms;
}
#outer:hover #inner {
  visibility: visible;
}

For opacity:

#inner1 {
  opacity: 0;
  transition: opacity 1000ms;
}
#outer1:hover #inner1 {
  opacity: 1;
}

The transition effect works as expected for opacity, but fails to trigger for visibility. Despite setting a transition duration of 1000ms, no animation is observed.

Explanation

The observed behavior is not a bug but a result of the way transition effects are implemented in CSS. Transitions work by calculating keyframes between two values and animating intermediate states. However, visibility is a binary value (visible or hidden), which doesn't allow for numeric values between these states.

As a result, the transition duration is interpreted as a delay before the visibility property switches from hidden to visible (or vice versa) upon hover. This delay mimics the effect of a transition, but it's not a true animation in the same sense as opacity transitions.

Transitionable Properties

To ensure smooth animations, transitions should be applied to ordinal properties, which have a clear start and end value with numeric values. A list of transitionable properties can be found at this link:

[Link to Transitionable Properties Reference]

The above is the detailed content of Why Does CSS Visibility Transition Not Work Like Opacity?. For more information, please follow other related articles on the PHP Chinese website!