CSS 5 초 후 요소 자동 숨기기

Question

페이지가로드 된 후 5 초 후에 요소를 숨길 수 있습니까? a jQuery solution이 있다는 것을 알고 있습니다.

나는 똑같은 일을하고 싶지만 CSS 전환으로 같은 결과를 얻기를 바란다.

혁신적인 아이디어가 있습니까? 또는 CSS 전환/애니메이션의 한계를 넘어서 묻는 것입니까?

Answer 1

예!

하지만 애니메이션 또는 다른에 의존하려는 속성 주위에 전환 생성 (예 : display 또는 변경 차원을하고 overflow:hidden로 설정) 어차피 때문에, 당신은 즉시 생각할 수있는 방법으로 그것을 할 수있는 요소를 정확하게 숨기고 가시적 인 공간을 차지하지 못하게하십시오.

따라서 문제의 요소에 대한 애니메이션을 만들고 5 초 후에 visibility:hidden;을 간단히 전환하고 높이와 너비를 0으로 설정하여 요소가 DOM 흐름에서 여전히 공간을 차지하지 않도록합니다.

FIDDLE

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 id='hideMe'>Wait for it...</div> 

Answer 2

당신이 바로 전환을 트리거하는 클래스 또는 무언가를 변경하는 setTimeout를 사용할 수 있습니다.

HTML :

<p id="aap">OHAI!</p> 

CSS :

p { 
    opacity:1; 
    transition:opacity 500ms; 
} 
p.waa { 
    opacity:0; 
} 

JS 부하 또는 DOMContentReady에서 실행 :

setTimeout(function(){ 
    document.getElementById('aap').className = 'waa'; 
}, 5000); 

Example fiddle here.

Answer 3

왜 시도하지 마시오 fadeOut?

페이드 아웃 (순수 자바 스크립트)

$(document).ready(function() { 
 
    $('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id='plsme'>Loading... Please Wait</div>

는 : @ SW4의 대답에서 기반

How to make fadeOut effect with pure JavaScript

Answer 4

, 당신은 또한 마지막에 약간의 애니메이션을 추가 할 수 있습니다. 나머지 0.5 초 만들기

는

body > div{ 
 
    border:1px solid grey; 
 
} 
 
html, body, #container { 
 
    height:100%; 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#container { 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 
#hideMe { 
 
    -webkit-animation: cssAnimation 5s forwards; 
 
    animation: cssAnimation 5s forwards; 
 
} 
 
@keyframes cssAnimation { 
 
    0% {opacity: 1;} 
 
    90% {opacity: 1;} 
 
    100% {opacity: 0;} 
 
} 
 
@-webkit-keyframes cssAnimation { 
 
    0% {opacity: 1;} 
 
    90% {opacity: 1;} 
 
    100% {opacity: 0;} 
 
}

<div> 
 
<div id='container'> 
 
    <div id='hideMe'>Wait for it...</div> 
 
</div> 
 
</div>

불투명도 속성을 애니메이션화. 길이를 바꾸는 경우 수학 계산을해야합니다.이 경우 5 초의 90 %는 0.5 초 동안 불투명도를 애니메이트합니다.