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

Patricia Arquette
풀어 주다: 2024-11-12 20:40:02
원래의
524명이 탐색했습니다.

How Can I Animate a Div with `display: none` in CSS?

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿