Direção, Fill-Mode e Iteração de Animações
Controle a direção de reprodução da animação, quantas vezes ela se repete e seu estado final com fill-mode.
Direção, Fill-Mode e Iteração de Animações é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Contagem de repetições da animação
Controla quantas vezes a animação se repete. Use infinite para criar uma repetição contínua.
<div class="spinner"></div>
<div class="pulse"></div>
Direção da animação
Controla a direção de reprodução em ciclos alternados:
normal— reproduz para a frente em cada repetiçãoreverse— reproduz para trásalternate— alterna entre para a frente e para trásalternate-reverse— alterna entre para trás e para a frente
<div class="bounce"></div>
Modo de preenchimento da animação
Define o que acontece com o elemento antes do início da animação e depois do seu término:
none— padrão; retorna ao estado originalforwards— mantém o último quadro-chave após a conclusãobackwards— aplica o primeiro quadro-chave durante o atrasoboth— aplica os modos para trás e para a frente
Modo de preenchimento para a frente
O caso de uso mais comum: manter o elemento em seu estado final animado depois que a animação for concluída:
<p class="item">I fade in and stay visible</p>
Modo de preenchimento para trás
Quando há um atraso, backwards faz o elemento começar no estado do primeiro quadro-chave durante o período de atraso, evitando um clarão do estado original antes do início da animação:
<p class="item">Starts invisible during the delay</p>
Modo de preenchimento em ambos os sentidos
both combina os modos para a frente e para trás — é a opção mais previsível para elementos animados que não devem apresentar um clarão antes ou depois da animação.
Atraso da animação
Adia o início de uma animação. Atrasos negativos fazem a animação começar no meio do ciclo, o que é útil para sincronizar várias animações:
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
Padrão de animação escalonada
Escalonamento usando apenas CSS, com atrasos baseados no seletor de filho n-ésimo:
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
Pausar e retomar
Alterne o estado da animação com JavaScript, alterando animation-play-state:
<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>
Redefinindo animações
Para reproduzir uma animação CSS, remova e readicione a classe. O navegador aplica um truque: force um refluxo entre a remoção e a adição.
<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>
Atraso negativo da animação
Inicie uma animação no meio da reprodução usando um atraso negativo — isso é útil para padrões de fundo sincronizados ou elementos em repetição que devem parecer já estar em movimento.
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
Verificação rápida
Qual valor do modo de preenchimento da animação mantém o elemento no estado do seu quadro-chave final depois que a animação termina?
Resumo
animation-iteration-count: infinite repete-se para sempre. animation-direction: alternate alterna o movimento para a frente e para trás. animation-fill-mode: forwards mantém o estado final. animation-fill-mode: both é a opção mais segura. Use atrasos negativos para deslocar animações sincronizadas.
Aprenda CSS com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “Direção, Fill-Mode e Iteração de Animações” é grátis?
Sim — o texto completo de “Direção, Fill-Mode e Iteração de Animações” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Direção, Fill-Mode e Iteração de Animações”?
Controle a direção de reprodução da animação, quantas vezes ela se repete e seu estado final com fill-mode. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Direção, Fill-Mode e Iteração de Animações”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Sintaxe de @keyframes e Propriedade de Animação
- Direção, Fill-Mode e Iteração de Animações
- Encadeamento e Sequenciamento de Animações
- Animações Acessíveis com prefers-reduced-motion