0

Estou criando uma animação que era para funcionar no qual tem o objetivo de aparecer e desaparecer o conteúdo do parágrafo, mas não acontece nada:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #text {
            animation: anima1 1s linear;
        }

        @keyframes anima1 {
            0% {
                display: block;
            }

            100% {
                display: none;
            }
        }
    </style>
</head>
<body>
    <p id="text">Text</p>
</body>
</html>

O que estou fazendo de errado para a animação não funcionar?

1 Resposta 1

2

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .