Skip to main content
removeu 6 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Animações CSS não funcionam com display. Se você quer que o parágrafo fique oculto após 1 segundo, você até poderia usar uma combinação de visibility: hidden com JavaScript, onde o JavaScript detectaria o fim da animação para aplicar um display: none no elemento:

document.addEventListener("DOMContentLoaded", function(){
   const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
   eventos.forEach((e)=>e=>{
      document.getElementById("text").addEventListener(e, function(){
         this.style.display = "none";
      });
   });
});
#text {
   animation: anima1 1s linear forwards;
}

@keyframes anima1 {
   100% {
      visibility: hidden;
   }
}
<p id="text">Text</p>
Qualquer coisa aqui

O visibility: hidden faz o elemento ficar invisível, mas ele continua ocupando espaço na página. O JavaScript detecta quando a animação do CSS termina e aplica o display: none.

Porém, já que, se for usar JavaScript, não precisa, neste caso, usar animação no CSS e o JavaScript ao mesmo tempo. Basta usar apenas JavaScript mais simples com setTimeout:

document.addEventListener("DOMContentLoaded", function(){
   setTimeout(function(){
      document.getElementById("text").style.display = "none";
   }, 1000);
});
<p id="text">Text</p>
Qualquer coisa aqui

Onde tem o valor 1000 é igual a 1 segundo. O valor do tempo do setTimeout é em milissegundos. Então basta você multiplicar os segundos que quer por 1000 (ex.: 5 segundos = 5000).

Agora, se você quer um efeito de transição, poderia usar opacity no lugar de visibility:

document.addEventListener("DOMContentLoaded", function(){
   const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
   eventos.forEach((e)=>e=>{
      document.getElementById("text").addEventListener(e, function(){
         this.style.display = "none";
      });
   });
});
#text {
   animation: anima1 1s linear forwards;
}

@keyframes anima1 {
   100% {
      opacity: 0;
   }
}
<p id="text">Text</p>
Qualquer coisa aqui

Animações CSS não funcionam com display. Se você quer que o parágrafo fique oculto após 1 segundo, você até poderia usar uma combinação de visibility: hidden com JavaScript, onde o JavaScript detectaria o fim da animação para aplicar um display: none no elemento:

document.addEventListener("DOMContentLoaded", function(){
   const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
   eventos.forEach((e)=>{
      document.getElementById("text").addEventListener(e, function(){
         this.style.display = "none";
      });
   });
});
#text {
   animation: anima1 1s linear forwards;
}

@keyframes anima1 {
   100% {
      visibility: hidden;
   }
}
<p id="text">Text</p>
Qualquer coisa aqui

O visibility: hidden faz o elemento ficar invisível, mas ele continua ocupando espaço na página. O JavaScript detecta quando a animação do CSS termina e aplica o display: none.

Porém, já que, se for usar JavaScript, não precisa, neste caso, usar animação no CSS e o JavaScript ao mesmo tempo. Basta usar apenas JavaScript mais simples com setTimeout:

document.addEventListener("DOMContentLoaded", function(){
   setTimeout(function(){
      document.getElementById("text").style.display = "none";
   }, 1000);
});
<p id="text">Text</p>
Qualquer coisa aqui

Onde tem o valor 1000 é igual a 1 segundo. O valor do tempo do setTimeout é em milissegundos. Então basta você multiplicar os segundos que quer por 1000 (ex.: 5 segundos = 5000).

Agora, se você quer um efeito de transição, poderia usar opacity no lugar de visibility:

document.addEventListener("DOMContentLoaded", function(){
   const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
   eventos.forEach((e)=>{
      document.getElementById("text").addEventListener(e, function(){
         this.style.display = "none";
      });
   });
});
#text {
   animation: anima1 1s linear forwards;
}

@keyframes anima1 {
   100% {
      opacity: 0;
   }
}
<p id="text">Text</p>
Qualquer coisa aqui

Animações CSS não funcionam com display. Se você quer que o parágrafo fique oculto após 1 segundo, você até poderia usar uma combinação de visibility: hidden com JavaScript, onde o JavaScript detectaria o fim da animação para aplicar um display: none no elemento:

document.addEventListener("DOMContentLoaded", function(){
   const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
   eventos.forEach(e=>{
      document.getElementById("text").addEventListener(e, function(){
         this.style.display = "none";
      });
   });
});
#text {
   animation: anima1 1s linear forwards;
}

@keyframes anima1 {
   100% {
      visibility: hidden;
   }
}
<p id="text">Text</p>
Qualquer coisa aqui

O visibility: hidden faz o elemento ficar invisível, mas ele continua ocupando espaço na página. O JavaScript detecta quando a animação do CSS termina e aplica o display: none.

Porém, já que, se for usar JavaScript, não precisa, neste caso, usar animação no CSS e o JavaScript ao mesmo tempo. Basta usar apenas JavaScript mais simples com setTimeout:

document.addEventListener("DOMContentLoaded", function(){
   setTimeout(function(){
      document.getElementById("text").style.display = "none";
   }, 1000);
});
<p id="text">Text</p>
Qualquer coisa aqui

Onde tem o valor 1000 é igual a 1 segundo. O valor do tempo do setTimeout é em milissegundos. Então basta você multiplicar os segundos que quer por 1000 (ex.: 5 segundos = 5000).

Agora, se você quer um efeito de transição, poderia usar opacity no lugar de visibility:

document.addEventListener("DOMContentLoaded", function(){
   const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
   eventos.forEach(e=>{
      document.getElementById("text").addEventListener(e, function(){
         this.style.display = "none";
      });
   });
});
#text {
   animation: anima1 1s linear forwards;
}

@keyframes anima1 {
   100% {
      opacity: 0;
   }
}
<p id="text">Text</p>
Qualquer coisa aqui

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Animações CSS não funcionam com display. Se você quer que o parágrafo fique oculto após 1 segundo, você até poderia usar uma combinação de visibility: hidden com JavaScript, onde o JavaScript detectaria o fim da animação para aplicar um display: none no elemento:

document.addEventListener("DOMContentLoaded", function(){
   const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
   eventos.forEach((e)=>{
      document.getElementById("text").addEventListener(e, function(){
         this.style.display = "none";
      });
   });
});
#text {
   animation: anima1 1s linear forwards;
}

@keyframes anima1 {
   100% {
      visibility: hidden;
   }
}
<p id="text">Text</p>
Qualquer coisa aqui

O visibility: hidden faz o elemento ficar invisível, mas ele continua ocupando espaço na página. O JavaScript detecta quando a animação do CSS termina e aplica o display: none.

Porém, já que, se for usar JavaScript, não precisa, neste caso, usar animação no CSS e o JavaScript ao mesmo tempo. Basta usar apenas JavaScript mais simples com setTimeout:

document.addEventListener("DOMContentLoaded", function(){
   setTimeout(function(){
      document.getElementById("text").style.display = "none";
   }, 1000);
});
<p id="text">Text</p>
Qualquer coisa aqui

Onde tem o valor 1000 é igual a 1 segundo. O valor do tempo do setTimeout é em milissegundos. Então basta você multiplicar os segundos que quer por 1000 (ex.: 5 segundos = 5000).

Agora, se você quer um efeito de transição, poderia usar opacity no lugar de visibility:

document.addEventListener("DOMContentLoaded", function(){
   const eventos = ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"];
   eventos.forEach((e)=>{
      document.getElementById("text").addEventListener(e, function(){
         this.style.display = "none";
      });
   });
});
#text {
   animation: anima1 1s linear forwards;
}

@keyframes anima1 {
   100% {
      opacity: 0;
   }
}
<p id="text">Text</p>
Qualquer coisa aqui