How to Animate a Hidden Element in CSS?

CSS Animation and Display: None

In CSS, animating elements that are hidden (e.g., display: none) is not straightforward. While setting display: none removes an element from the document flow, it still occupies space. To resolve this issue:

1. Set a Fixed Height:

Since you cannot animate between display: none and display: block, fix the initial height of the hidden element to the height it will occupy when revealed.

CSS:

#main-div {
  height: 0;
  display: block;
  overflow: hidden;
  animation-delay: 3.5s;
}

2. Use an Animation Keyframe:

Define an animation keyframe that transitions the element from a height of 0 to the desired height.

CSS:

@keyframes main-div-slide {
  from {
    height: 0;
  }
  to {
    height: 375px;
  }
}

3. Apply the Animation:

Associate the animation keyframe with the hidden element.

CSS:

#main-div {
  animation: main-div-slide 1s ease 3.5s forwards;
}

Now, the hidden element will seamlessly slide down into view without affecting the layout of other elements on the page.

Note: This approach works if you have a fixed height for the hidden element. For dynamic heights, you may need to use jQuery or JavaScript.

The above is the detailed content of How to Animate a Hidden Element in CSS?. For more information, please follow other related articles on the PHP Chinese website!