CSS Auto esconde elementos después de 5 segundos

¿Es posible ocultar el elemento 5 segundos después de la carga de la página? Sé que hay una solución jQuery .

Quiero hacer exactamente lo mismo, pero espero obtener el mismo resultado con la transición de CSS.

¿Alguna idea innovadora? ¿O estoy preguntando más allá del límite de la transición / animación css?

¡SÍ!

Pero no puede hacerlo de la manera en que puede pensar de inmediato, porque no puede animar o crear una transición alrededor de las propiedades en las que de otra manera dependería (por ejemplo, display o cambiar las dimensiones y la configuración a overflow:hidden ) para corregir correctamente ocultar el elemento y evitar que ocupe espacio visible.

Por lo tanto, crea una animación para los elementos en cuestión y simplemente alternar visibility:hidden; después de 5 segundos, mientras que también establece el alto y el ancho a cero para evitar que el elemento siga ocupando espacio en el flujo de DOM.

VIOLÍN

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...

Por supuesto que puedes, simplemente usa setTimeout para cambiar una clase o algo para activar la transición.

HTML:

 

OHAI!

CSS:

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

JS para ejecutar con carga o DOMContentReady:

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

Ejemplo de violín aquí .

basado en la respuesta de @ SW4, también podría agregar un poco de animación al 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 qué no probar fadeOut ?

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