Controlando 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.css
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.css
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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.04Controlando 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.css
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.css
Obrigado pelo seu feedback!
