CSS에서 `display: none`을 사용하여 Div에 애니메이션을 적용하려면 어떻게 해야 합니까?

CSS 애니메이션 및 표시 없음

CSS를 사용하여 div에 애니메이션을 적용하려는 경우 표시 속성의 한계를 이해하는 것이 중요합니다. 디스플레이 동안: 없음; 속성은 보기에서 요소를 숨길 수 있지만 문서 흐름에서 해당 요소를 제거하지는 않습니다. 이로 인해 페이지 공간을 차지하는 요소에 애니메이션을 적용할 때 문제가 발생할 수 있습니다.

원하는 효과를 얻으려면 디스플레이에서 기본 div를 직접 전환할 수 없습니다. 없음; 표시하다: 차단;. 대신, 기본 div의 높이를 0으로 설정하고 Overflow: Hidden;을 사용해야 합니다. 처음에는 숨기려고요. 그런 다음 기본 div가 안으로 들어갈 때가 되면 div의 높이를 원하는 값으로 애니메이션화할 수 있습니다.

예는 다음과 같습니다.

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

#main-div.fadeInDownBig {
    height: 375px;
}

이렇게 하면 3.5초 후에 기본 div가 미끄러져 들어가고 다른 div가 뷰포트에 들어갈 때 페이지 아래로 밀려납니다.

이 기술은 불투명도와 같은 다른 속성에도 적용됩니다. 예를 들어, 불투명도를 0에서 1까지 점진적으로 높여서 div를 페이드 인할 수 있습니다.

위 내용은 CSS에서 `display: none`을 사용하여 Div에 애니메이션을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!