Gerador de animação CSS
Crie animações CSS @keyframes a partir de predefinições ou dos seus keyframes, defina duração, atraso, repetições, direção, fill mode e uma curva cubic-bezier.
Predefinições
Quadros-chave
Uma regra por linha, ex.: 50% { transform: scale(1.2); }. Edite à vontade; a pré-visualização atualiza na hora.
Tempo
Pré-visualização
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.animated {
animation: bounce 1s ease 0s infinite normal both;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation: none;
}
}Ferramentas Relacionadas
Ver TodasO que é Gerador de animação CSS?
Monta uma animação CSS completa: a regra @keyframes, a forma abreviada animation e uma substituição opcional para prefers-reduced-motion. Comece por predefinições como fade, slide, bounce, pulse, shake, spin ou heartbeat, edite os keyframes à vontade e molde o tempo com uma curva cubic-bezier arrastável.
Como usar Gerador de animação CSS
- Escolha uma predefinição ou digite seus próprios keyframes (uma regra por linha).
- Defina o nome da animação, a duração e o atraso.
- Escolha a direção, o fill mode e repetir para sempre ou um número de repetições.
- Escolha uma função de tempo ou arraste as alças da cubic-bezier / digite X1, Y1, X2, Y2.
- Clique em reproduzir de novo para ver outra vez e copie o código CSS.
Exemplo
Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.animated {
animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
} Quando usar Gerador de animação CSS
Use-o para efeitos de entrada, loaders, chamadas de atenção e microinterações. Para mudanças simples de estado (cor ou tamanho no hover), uma transition CSS basta. Mantenha a opção de movimento reduzido ativada para que usuários que pediram menos movimento ao sistema não sejam afetados por grandes deslocamentos.
Como funciona Gerador de animação CSS
O texto dos keyframes é envolvido em @keyframes name { … } e as configurações são escritas na ordem padrão da forma abreviada name duration timing-function delay iteration-count direction fill-mode. O editor de bezier limita os valores X a 0–1 (como o CSS exige), enquanto Y pode ultrapassar esses limites para easings tipo bounce; quando os quatro valores equivalem a uma palavra-chave CSS (ease, linear, ease-in, ease-out, ease-in-out), a palavra-chave é escrita no lugar. O nome é sanitizado para um identificador CSS válido. A prévia usa um nome de keyframes privado, para nunca conflitar com as animações da própria página.
Casos de Uso Comuns
- Animações de entrada com fade ou slide
- Spinners infinitos e loaders pulsantes
- Tremida de feedback em entradas inválidas de formulário
- Indicadores de rolagem que quicam
- Easing personalizado para movimentos da marca
Perguntas Frequentes
O que o fill mode faz?
forwards mantém o último keyframe depois que a animação termina, backwards aplica o primeiro keyframe durante o atraso, both faz as duas coisas e none não aplica nenhuma.
Por que os valores X da bezier são limitados a 0–1?
X representa o tempo, que não pode voltar, então o CSS rejeita valores fora de 0–1. Y representa o progresso e pode ultrapassar os limites para criar antecipação ou quique.
O que a opção de movimento reduzido acrescenta?
Um bloco @media (prefers-reduced-motion: reduce) que define animation: none para usuários que ativaram o movimento reduzido no sistema operacional.