CSS 전환 또는 애니메이션이 5초 후에 요소를 자동으로 숨길 수 있나요?

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

질문이 생깁니다. 페이지가 로드된 후 5초 후에 요소를 숨기는 것이 가능할까요? ? jQuery 솔루션이 알려져 있지만 CSS 전환을 사용하여 이를 복제하려는 의도입니다. 가능합니까, 아니면 CSS 전환/애니메이션의 기능을 넘어서는 것입니까?

답변

대답은 '예'입니다! 그러나 일반적으로 요소를 숨기는 데 사용되는 속성(예: 표시 또는 크기 변경 및 오버플로: 숨김으로 설정)에 애니메이션을 적용하거나 전환하는 것이 불가능하므로 예상한 방식으로 수행할 수 없습니다.

대신 애니메이션 관련 요소에 대해 생성됩니다. 5초 후 가시성: 숨겨짐; 요소가 DOM 흐름에서 공간을 차지하지 않도록 높이와 너비는 0으로 설정됩니다.

예 코드

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></div>

위 내용은 CSS 전환 또는 애니메이션이 5초 후에 요소를 자동으로 숨길 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!