Estava testando as animações de outra forma e não obtive sucesso, a div sumiu como eu queria mas depois voltou. O que devo fazer para que ela apareça por 1s na tela, faça o indicado no @keyframes loading e não apareça mais?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Estava testando as animações de outra forma e não obtive sucesso, a div sumiu como eu queria mas depois voltou. O que devo fazer para que ela apareça por 1s na tela, faça o indicado no @keyframes loading e não apareça mais?
Oi Rapahel, ela volta por que o estado normal da div é ela grande com o background. A dica aqui é, coloca o tamanho da div no from e usa o animation-iteration-count pra dizer que a animação vai rodar apenas uma vez.
Assim, no from a div fica grande, some, e depois ela não aparece mais por que no estado normal da div, ela não tem dimensões.
.loading {
position: absolute;
background-color: red;
animation: loading 1s;
animation-iteration-count: 1;
}
@keyframes loading {
from{
width: 100%;
height: 185%;
}
to {
background-color: transparent;
}
}Isso já resolve o problema.