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 중국어 웹사이트의 기타 관련 기사를 참조하세요!