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.