Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Animação de carregamento

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?

Código: https://codepen.io/jaaor/pen/ZRggbZ

1 resposta
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.