CSS Auto ocultar elementos após 5 segundos

É possível ocultar o elemento 5 segundos após o carregamento da página? Eu sei que existe uma solução jQuery .

Eu quero fazer exatamente a mesma coisa, mas na esperança de obter o mesmo resultado com a transição CSS.

Alguma ideia inovadora? Ou eu estou pedindo além do limite de transição / animação css?

SIM!

Mas você não pode fazê-lo da maneira que você pode pensar imediatamente, porque você não pode animar ou criar uma transição em torno das propriedades que você confiaria de outra forma (por exemplo, display ou alterar dimensões e configuração para overflow:hidden ) para corretamente esconda o elemento e evite que ele ocupe espaço visível.

Portanto, crie uma animação para os elementos em questão e simplesmente ative a visibility:hidden; após 5 segundos, ao mesmo tempo que define a altura e a largura como zero para evitar que o elemento ainda ocupe espaço no stream 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

 
Wait for it...

Claro que você pode, basta usar setTimeout para mudar uma class ou algo para acionar a transição.

HTML:

 

OHAI!

CSS:

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

JS para executar no carregamento ou DOMContentReady:

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

Exemplo de violino aqui .

Com base na resposta de @ SW4, você também pode adicionar um pouco de animação no final.

 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;} } 
 
Wait for it...

Por que não experimentar o fadeOut ?

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