如何为 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.

以上是如何为 CSS 中的隐藏元素添加动画效果？的详细内容。更多信息请关注PHP中文网其他相关文章！