Gerador de Animações CSS
O gerador de animação CSS cria animações @keyframes a partir de 14 presets, como fade in, slide in, bounce in, pulso, giro, tremor e zoom, com controles de duração, função de timing e número de repetições.
Sobre esta ferramenta
O gerador de animação CSS cria animações @keyframes a partir de 14 presets, como fade in, slide in, bounce in, pulso, giro, tremor e zoom, com controles de duração, função de timing e número de repetições.
Como usar
- Escolha um preset de animação.
- Defina a duração, a função de timing e o número de repetições.
- Clique em Repetir para ver a prévia.
- Clique em Copiar CSS para obter os @keyframes e a regra animation.
Bom saber
- Uma animação CSS tem duas partes: uma regra @keyframes e uma propriedade animation no elemento.
- Animar transform e opacity costuma ser a opção mais fluida em termos de desempenho.
- Funções de timing como ease-out começam rápido e desaceleram, o que parece natural em entradas.
- Respeite a media query prefers-reduced-motion para usuários que pediram menos movimento.
- Um número de repetições infinite é ideal para loaders; efeitos de entrada normalmente rodam uma única vez.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Como criar uma animação CSS?
Defina o movimento em uma regra @keyframes e aplique com animation: nome duração timing repetições. O gerador escreve as duas partes para você.
Qual a diferença entre transições e animações CSS?
Transições animam a mudança entre dois estados quando uma propriedade muda, como no hover. Animações usam keyframes, podem rodar automaticamente e se repetir em loop.
Como fazer uma animação repetir para sempre?
Defina o número de repetições como infinite, por exemplo animation: spin 1s linear infinite.
Animações CSS afetam a acessibilidade?
Movimentos grandes ou contínuos podem incomodar alguns usuários. Coloque as animações não essenciais dentro de @media (prefers-reduced-motion: no-preference).