Planos a partir de R$ 39/mês Inscreva-se Agora

Animation Iteration Count e Direction

animation-iteration-count

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:

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:

Mais Dicas

Design

Dica #09 Tipografia – Góticas

Código

CSS – pseudo-class :first-child

Código

Pseudo-elements :after e :before para estilizar títulos

Código

Como adicionar uma barra de loading igual a do YouTube com JavaScript

Design

Consistência no Design