Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Controlando Iteração e Direção da Animação | Animações CSS Avançadas
Técnicas Avançadas de CSS

bookControlando Iteração e Direção da Animação

Propriedade animation-iteration-count

É possível controlar quantas vezes uma animação deve ser executada. animation-iteration-count define o número de repetições da animação.

animation-iteration-count: number_without_units

Também é possível especificar a palavra-chave infinite como valor. Assim, a animação será processada continuamente. Considere o exemplo a seguir para verificar como é possível influenciar o número de execuções da animação:

index.html

index.html

index.css

index.css

copy

Propriedade animation-direction

animation-direction controla a direção da animação. Ela determina se uma animação deve ser executada para frente, para trás ou alternar entre frente e trás.

animation-direction: normal | reverse | alternate | alternate-reverse
  • normal - valor padrão. A animação será executada para frente, do início ao fim;
  • reverse - A animação será executada para trás, do fim ao início;
  • alternate - A animação será executada para frente e depois para trás, alternando entre as duas direções;
  • alternate-reverse - A animação será executada para trás e para frente, alternando entre as duas direções.

Veja o efeito que podemos alcançar no exemplo a seguir. Teremos uma imagem cujo comportamento padrão é mover-se repetidamente do lado esquerdo para o direito. No entanto, podemos alterar esse comportamento. Vamos testar todos os quatro valores para a propriedade animation-direction.

index.html

index.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 3

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you show me an example of how to use animation-iteration-count and animation-direction together?

What does the animation look like with each animation-direction value?

Can you explain the difference between alternate and alternate-reverse with a visual example?

Awesome!

Completion rate improved to 2.04

bookControlando Iteração e Direção da Animação

Deslize para mostrar o menu

Propriedade animation-iteration-count

É possível controlar quantas vezes uma animação deve ser executada. animation-iteration-count define o número de repetições da animação.

animation-iteration-count: number_without_units

Também é possível especificar a palavra-chave infinite como valor. Assim, a animação será processada continuamente. Considere o exemplo a seguir para verificar como é possível influenciar o número de execuções da animação:

index.html

index.html

index.css

index.css

copy

Propriedade animation-direction

animation-direction controla a direção da animação. Ela determina se uma animação deve ser executada para frente, para trás ou alternar entre frente e trás.

animation-direction: normal | reverse | alternate | alternate-reverse
  • normal - valor padrão. A animação será executada para frente, do início ao fim;
  • reverse - A animação será executada para trás, do fim ao início;
  • alternate - A animação será executada para frente e depois para trás, alternando entre as duas direções;
  • alternate-reverse - A animação será executada para trás e para frente, alternando entre as duas direções.

Veja o efeito que podemos alcançar no exemplo a seguir. Teremos uma imagem cujo comportamento padrão é mover-se repetidamente do lado esquerdo para o direito. No entanto, podemos alterar esse comportamento. Vamos testar todos os quatro valores para a propriedade animation-direction.

index.html

index.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 3
some-alt