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?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta
resposta
Animação de carregamento
solução!
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.