Com a propriedade animation-iteration-count você define quantas vezes essa animação será repetida.
See the Pen animation-loading by André | Origamid (@origamid) on CodePen.
Você pode colocar um número qualquer ou a palavra-chave infinite. Com o infinite a animação será repetida infinitamente. Este valor será bem vindo quando estivermos criando uma animação de loading como no exemplo acima.
Sem mistério, ou você define um número ou se ela será infinita.
Outra propriedade de animação é a animation-direction. Ela é responsável por definir qual a direção em que a animação vai ocorrer.
Os seguintes valores são possíveis com ela:
- normal
- reverse
- alternate
- alternate-reverse
O normal é o valor padrão. No exemplo do loading acima, ficaria bem ruim apenas com o normal, pois a animação iria ocorrer com as bolinhas caindo, porém ao final elas resetariam para a posição inicial.
O reverse muda a ordem da sua animação. Então se você está animando de 100px para 0px, ele passa a animar de 0px para 100px, sem a necessidade de você alterar os @keyframes.
Para animações infinitas, geralmente o alternate é a melhor opção. Com ele a animação vai e volta. O que isso significa, que a primeira animação será normal, a segunda reverse e assim por diante. Criando uma ilusão de vai e volta.
O alternate-reverse funciona da mesma maneira que o alternate, porém ele começa pela posição contrária da animação definida nos @keyframes.
Todas as postagens sobre animações com CSS: