img - CSS Auto esconde elementos después de 5 segundos

title html attribute

Question

¿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?

Answer 1

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

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

¿Por qué no probar 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>

fadeOut (Javascript puro):

Cómo hacer efecto fadeOut con JavaScript puro

Answer 3

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

HTML:

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

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

Answer 4

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;}
}

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

Realizando los 0,5 segundos restantes para animar el atributo de opacidad. Solo asegúrate de hacer los cálculos si cambias la longitud, en este caso, el 90% de 5 segundos nos deja 0.5 segundos para animar la opacidad.