Encadeamento e Sequenciamento de Animações
Crie sequências complexas encadeando várias animações com atrasos escalonados.
Encadeamento e Sequenciamento de Animações é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 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.
Por que sequenciar animações?
Efeitos complexos de interface geralmente exigem várias animações que acontecem em ordem: um elemento desliza para dentro, faz uma pausa e depois desaparece gradualmente. O CSS oferece várias ferramentas para encadear animações sem JavaScript.
Usando o atraso da animação para criar sequências
A forma mais simples de criar uma sequência é calcular quando a próxima animação deve começar com base na duração da anterior:
<div class="element">Slides in, then fades out</div>
Quadros-chave com várias etapas
A abordagem mais limpa para um único elemento é codificar toda a sequência em uma única regra @keyframes com pontos de referência percentuais:
<div class="toast">Notification toast</div>
Propriedades personalizadas do CSS para duração
Armazene as durações em variáveis CSS para facilitar a coordenação entre animações encadeadas:
<div class="box">Custom-property-driven timing</div>
Linha do tempo da animação (moderna)
A API de animações da Web e as animações vinculadas à rolagem (ScrollTimeline) permitem criar sequências sofisticadas sem cálculos de atraso. Esse é o futuro da orquestração de animações CSS complexas.
Escalonamento com propriedade personalizada do CSS
Defina os atrasos de escalonamento a partir de propriedades personalizadas do CSS configuradas diretamente no elemento ou por meio de JavaScript:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
Sequenciamento controlado por JavaScript
Para sequências precisas com vários elementos, use a API de animações da Web ou uma biblioteca como GSAP. O CSS sozinho é limitado para coordenar elementos independentes com interdependências complexas.
Animações de atenção
Uma sequência de animação que pulsa e depois se estabiliza para chamar a atenção:
<div class="notification">New message!</div>
Evento AnimationEnd
Ouça animationend em JavaScript para acionar a próxima etapa programaticamente:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
Padrão de transição de página
Uma sequência de transição de página em CSS usando a alternância de classes:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
Esqueleto do estado de carregamento
Uma animação de carregamento de esqueleto com várias etapas usando deslocamentos:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
Verificação rápida
Qual é a melhor forma de codificar no CSS uma sequência completa de animação com várias etapas para um único elemento?
Resumo
O sequenciamento de animações CSS usa atrasos cronometrados com base nas durações anteriores, @keyframes com várias etapas e pontos de referência percentuais ou variáveis de duração em propriedades personalizadas. O evento animationend permite fases sequenciais acionadas por JavaScript. Para orquestrações complexas com vários elementos, considere a API de animações da Web.
Perguntas Frequentes
A aula “Encadeamento e Sequenciamento de Animações” é grátis?
Sim — o texto completo de “Encadeamento e Sequenciamento 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 “Encadeamento e Sequenciamento de Animações”?
Crie sequências complexas encadeando várias animações com atrasos escalonados. 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 3 de 4.
Quanto tempo leva a aula “Encadeamento e Sequenciamento 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