> 웹 프론트엔드 > CSS 튜토리얼 > CSS만 사용하여 5초 후에 요소를 숨길 수 있나요?

CSS만 사용하여 5초 후에 요소를 숨길 수 있나요?

DDD
풀어 주다: 2024-11-13 14:06:02
원래의
532명이 탐색했습니다.

Can you hide an element after 5 seconds using only CSS?

CSS가 5초 후 요소 자동 숨기기

CSS를 사용하여 페이지 로드 후 5초가 지나면 요소를 숨길 수 있나요? jQuery 솔루션은 확실히 가능하지만 CSS 전환을 사용하여 이를 달성할 수 있습니까?

답변: 예

그러나 반전이 있습니다. CSS 전환은 진정한 숨기기를 달성하기 위해 "표시" 또는 크기와 같은 속성에 적용할 수 없습니다. 대신 요소에 대한 애니메이션을 만들고 5초 후에 표시 여부를 '숨김'으로 전환하세요. 동시에 높이와 너비를 0으로 설정하여 DOM 흐름에서 공간 점유를 방지합니다.

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}
로그인 후 복사

HTML

<div>
로그인 후 복사

이 접근 방식은 페이지 흐름에 영향을 주지 않고 지정된 지연 후에 요소를 숨겨 CSS 전환을 사용하여 원하는 결과를 얻습니다.

위 내용은 CSS만 사용하여 5초 후에 요소를 숨길 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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