CSS에서 숨겨진 요소에 애니메이션을 적용하는 방법은 무엇입니까?

CSS 애니메이션 및 표시: 없음

CSS에서 숨겨진 요소(예: 표시: 없음)에 애니메이션을 적용하는 것은 간단하지 않습니다. display: none을 설정하는 동안 문서 흐름에서 요소를 제거하지만 여전히 공간을 차지합니다. 이 문제를 해결하려면:

1. 고정 높이 설정:

display: none과 display: block 사이에서는 애니메이션을 적용할 수 없으므로 숨겨진 요소의 초기 높이를 공개 시 차지할 높이로 고정합니다.

CSS:

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

2. 애니메이션 키프레임 사용:

요소를 높이 0에서 원하는 높이로 전환하는 애니메이션 키프레임을 정의합니다.

CSS:

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

3. 애니메이션 적용:

애니메이션 키프레임을 숨겨진 요소와 연결합니다.

CSS:

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

이제 숨겨진 요소 페이지의 다른 요소 레이아웃에 영향을 주지 않고 원활하게 아래로 미끄러져 표시됩니다.

참고: 이 접근 방식은 숨겨진 요소의 높이가 고정된 경우에 작동합니다. 동적 높이의 경우 jQuery 또는 JavaScript를 사용해야 할 수도 있습니다.

위 내용은 CSS에서 숨겨진 요소에 애니메이션을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!