애니메이션 요소에 `display: none;`이 있는 경우 CSS에서 슬라이딩 애니메이션을 어떻게 만들 수 있나요?

디스플레이와 결합된 CSS 애니메이션: 없음

"main-div"가 슬라이드되는 CSS 애니메이션을 만들고 싶습니다. 지정된 기간으로 경로에 있는 다른 div를 아래로 밀어냅니다. 그러나 "main-div"에 대해 "display" 속성을 "none"으로 설정하면 애니메이션이 실행되지 않습니다.

이 제한을 극복하기 위해 "display: none;" 사이에서 직접 애니메이션을 적용할 수 없습니다. 그리고 "디스플레이: 블록;" 또는 "높이: 0;" 사이 그리고 "높이: 자동." 대신 div의 높이를 수동으로 지정해야 합니다.

다음은 바닐라 CSS를 사용한 예입니다.

#main-image {
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

이 코드에서는 "기본 이미지"의 높이를 명시적으로 설정합니다. div를 처음에는 0픽셀로 설정하여 효과적으로 숨깁니다. "오버플로: 숨김;" 속성은 콘텐츠가 지정된 높이를 넘지 않도록 방지합니다.

그런 다음 CSS 애니메이션을 사용하여 초기 높이 0에서 원하는 높이 300px로 부드럽게 전환합니다. "animation-delay" 속성을 사용하면 3.5초 지연 후 애니메이션이 시작됩니다.

이 접근 방식을 사용하면 "display: none;"을 사용하지 않고도 슬라이딩 애니메이션을 생성할 수 있습니다. CSS가 제공하는 부드러운 전환과 정확한 타이밍을 유지하면서

위 내용은 애니메이션 요소에 `display: none;`이 있는 경우 CSS에서 슬라이딩 애니메이션을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!