CSS Auto ocultar elementos después de 5 segundos

Después de investigar con especialistas en el tema, programadores de diversas ramas y profesores hemos dado con la solución al problema y la dejamos plasmada en esta publicación.

Solución:

¡SÍ!

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

Por lo tanto, cree una animación para los elementos en cuestión y simplemente cambie visibility:hidden; después de 5 segundos, al tiempo que establece la altura y el ancho en cero para evitar que el elemento siga ocupando espacio en el flujo 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...

basado en la respuesta de @ SW4, también podría agregar una pequeña 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...

Haciendo los 0.5 segundos restantes para animar la opacidad. attribute. Solo asegúrese de hacer los cálculos si está cambiando la duración, en este caso, el 90% de 5 segundos nos deja 0,5 segundos para animar la opacidad.

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

HTML:

OHAI!

CSS:

p 
    opacity:1;
    transition:opacity 500ms;

p.waa 
    opacity:0;

JS para ejecutar en carga o DOMContentReady:

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

Ejemplo de violín aquí.

Acuérdate de que tienes el privilegio añadir un enjuiciamiento acertado si te ayudó.

---

---

Utiliza Nuestro Buscador