Why Does CSS Visibility Transition Not Work Like Opacity?

DDD
Release: 2024-11-07 17:41:02
Original
296 people have browsed it

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;
}
Copy after login

For opacity:

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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!