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