Gerador de Animação CSS
Crie animações CSS com keyframes visualmente. Preview ao vivo e código pronto para copiar.
3 usos@keyframes minha-animacao {
0% {
opacity: 1;
background-color: #4F46E5;
}
100% {
opacity: 1;
background-color: #EC4899;
}
}
.elemento {
animation: minha-animacao 1s ease infinite normal none;
}Como usar o Gerador de Animação CSS
- 1
Configure os keyframes
Adicione keyframes e defina as propriedades CSS de cada um: transform (translate, rotate, scale), opacidade e cor de fundo.
- 2
Ajuste o timing
Configure duração, função de timing (ease, linear, etc.), número de repetições, direção e fill mode da animação.
- 3
Copie o CSS
Clique em "Copiar" para copiar o código CSS gerado (@keyframes + animation shorthand) e cole no seu projeto.
O que são animações CSS?
Animações CSS permitem criar transições visuais complexas diretamente no navegador, sem necessidade de JavaScript ou bibliotecas externas. Elas funcionam definindo keyframes — pontos intermediários que descrevem como um elemento deve aparecer em diferentes momentos da animação.
A regra @keyframes define o nome e os estados da animação. Cada keyframe especifica propriedades CSS em uma porcentagem do tempo total (0% a 100%). O navegador interpola automaticamente os valores entre os keyframes, criando transições suaves.
A propriedade animation aplica a animação ao elemento, controlando duração, função de timing (como ease ou linear), número de repetições, direção e fill mode. Combinando múltiplos keyframes com diferentes propriedades como transform, opacity e background-color, você pode criar efeitos visuais sofisticados como bounce, fade, slide e spin.
Animações CSS são performáticas porque o navegador pode otimizá-las usando a GPU, especialmente para propriedades como transform e opacity. Elas são essenciais para criar interfaces modernas e interativas.
Perguntas frequentes
- Qual a diferença entre transition e animation no CSS?
- Transitions são mudanças simples entre dois estados, ativadas por um evento (como hover). Animations permitem definir múltiplos keyframes e rodar automaticamente, com controle de repetição, direção e timing mais avançado.
- Posso combinar várias propriedades em um keyframe?
- Sim! Cada keyframe pode conter múltiplas propriedades CSS. Neste gerador, você pode combinar transform (translate, rotate, scale), opacidade e cor de fundo em cada ponto da animação.
- O que é o fill-mode de uma animação CSS?
- O fill-mode define como o elemento se comporta antes e depois da animação. "forwards" mantém o estilo do último keyframe, "backwards" aplica o estilo do primeiro keyframe durante o delay, e "both" combina os dois comportamentos.
- Animações CSS afetam a performance do site?
- Animações usando transform e opacity são otimizadas pela GPU e têm excelente performance. Evite animar propriedades que causam reflow (como width, height, margin) para manter a fluidez.