순수 CSS 전환을 사용하여 지연 후 요소를 숨길 수 있나요?

지연 후 CSS로 요소 숨기기

jQuery 솔루션의 필요성을 없애기 위해 이 질문은 요소를 5초 동안 숨기는 것이 가능한지 여부를 탐구합니다. 순전히 CSS 전환을 사용하여 페이지를 로드한 후.

혁신적인 접근 방식

CSS 애니메이션 및 전환은 일반적으로 크기나 가시성과 같은 속성 수정을 중심으로 이루어지기 때문에 표준 숨기기 방법은 여기에는 요소(예: 표시를 숨김으로 설정)가 적용되지 않습니다.

따라서 맞춤형 애니메이션 시퀀스가 ​​이 문제를 해결합니다. 5초 후에 높이와 너비를 0으로 애니메이션화하면 레이아웃에서 공간을 전혀 차지하지 않으면서 요소가 보기에서 효과적으로 사라집니다. 동시에 가시성을 숨김으로 설정하면 사용자가 인식할 수 없게 됩니다.

구현 및 예

다음 코드는 이 솔루션을 구현하는 방법을 보여줍니다.

CSS:

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        visibility: hidden; /* In WebKit/Blink browsers */
        overflow: hidden;
    }
}

HTML:

<div>

바이올린:

참조 JSFiddle에서 실행 중인 솔루션: [바이올린 링크]

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