Animações com @keyframes
Defina animações com várias etapas usando @keyframes, associe-as com a abreviação animation e controle iterações, direção e fill-mode.
Animações com @keyframes é uma aula grátis de Frontend 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Transições versus animações
As transições animam a passagem entre dois estados acionados por uma alteração. As animações com @keyframes são executadas automaticamente, podem repetir, ser invertidas, tocar infinitamente e definir várias etapas intermediárias — sem exigir um acionador.
Definindo @keyframes
Declare uma sequência de animação com @keyframes. Defina estados em porcentagens (0%, 50%, 100%) ou utilizando as palavras-chave from e to.
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}A forma abreviada da animação
animation: name duration timing-function delay iteration-count direction fill-mode. Aplique a animação a um elemento utilizando essa forma abreviada.
.card {
animation: fadeIn 0.4s ease-out forwards;
}
.loader {
animation: pulse 1.5s ease-in-out infinite;
}Contagem de repetições da animação
Define quantas vezes a animação será executada. infinite cria um loop contínuo. Um número faz com que ela seja executada exatamente essa quantidade de vezes.
.spinner {
animation: spin 1s linear infinite;
}
.badge {
animation: bounce 0.6s ease 3; /* plays 3 times */
}Direção da animação
normal (padrão): avança em cada execução. reverse: retrocede. alternate: avança e depois retrocede. alternate-reverse. A alternância é excelente para efeitos de ida e volta.
@keyframes swing {
from { transform: rotate(-15deg); }
to { transform: rotate(15deg); }
}
.pendulum {
animation: swing 1s ease-in-out infinite alternate;
}Modo de preenchimento da animação
Controla o estado do elemento antes e depois da animação. forwards: o elemento permanece no estado do quadro-chave final. backwards: aplica o estado inicial durante o atraso. both: aplica os dois comportamentos.
.entrance {
opacity: 0;
animation: fadeIn 0.5s ease 0.2s forwards;
/* stays visible (opacity: 1) after animation ends */
}Estado de execução da animação
Pause e retome animações com JavaScript alternando entre animation-play-state: paused | running.
// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';Várias animações
Aplique várias animações a um elemento separando-as por vírgulas. Cada animação é executada de forma independente.
.icon {
animation:
rotate 2s linear infinite,
pulse 1.5s ease-in-out infinite alternate;
}Animações escalonadas com atraso da animação
Escalone os itens de uma lista aumentando o atraso a cada item. As propriedades personalizadas do CSS facilitam esse processo com JavaScript.
/* CSS */
.list-item {
animation: slideIn 0.3s ease forwards;
animation-delay: calc(var(--index) * 60ms);
}
/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
el.style.setProperty('--index', i);
});will-change — indicação para o navegador
will-change: transform indica ao navegador que a propriedade será animada, permitindo que ele promova o elemento para sua própria camada de composição antecipadamente. Utilize isso com moderação — muitas camadas de composição desperdiçam memória da GPU.
.animated {
will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');Prática: tela de carregamento esqueleto
Telas esqueleto utilizam uma animação cintilante para indicar que o conteúdo está sendo carregado. Um gradiente desliza sobre formas de preenchimento.
@keyframes shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
#e2e8f0 25%,
#edf2f7 50%,
#e2e8f0 75%
) 200% 0 / 200% 100%;
animation: shimmer 1.5s linear infinite;
}Verificação rápida
Qual valor do modo de preenchimento da animação faz o elemento manter o estado do quadro-chave final depois que a animação termina?
Recapitulação: animações com @keyframes
Defina-as com @keyframes usando from/to ou porcentagens. Aplique-as com a forma abreviada de animação. Utilize a contagem de repetições para criar loops. Utilize a direção alternate para movimentos de ida e volta. Use o modo de preenchimento forwards para manter o estado final. Escalone as animações com o atraso da animação e variáveis CSS. Utilize quadros-chave de transformação e opacidade para obter animações compostas suaves.
Perguntas Frequentes
A aula “Animações com @keyframes” é grátis?
Sim — o texto completo de “Animações com @keyframes” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Animações com @keyframes”?
Defina animações com várias etapas usando @keyframes, associe-as com a abreviação animation e controle iterações, direção e fill-mode. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 “Animações com @keyframes”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Propriedades personalizadas CSS: declaração e atualização
- Transições: propriedade duração temporização
- Animações com @keyframes
- Respeitando prefers-reduced-motion