Gerador de animação CSS
Crie uma animação CSS ao vivo: 15 efeitos (fade, deslize, quique, pulso…), duração, atraso, curva, repetições. Código @keyframes pronto para copiar.
- Grátis
- Sem cadastro
- Nenhum arquivo enviado
- Windows, Mac, Android, iPhone
Carregando a ferramenta…
Sobre esta ferramenta
Dê vida às suas interfaces sem biblioteca: 15 animações CSS prontas (fade, deslizes, zoom, quique, pulso, tremida, giro, virada…) com duração, atraso, curva de tempo, repetições, direção e modo de preenchimento ajustáveis. O código @keyframes está pronto para copiar, inclusive numa versão que respeita o movimento reduzido.
Quando usar
Entrada de conteúdos
Um deslize para cima de 0,5 s nos cards de uma página deixa o carregamento mais agradável.
Chamar a atenção
Um pulso discreto num botão ou uma tremida num campo inválido guiam o olhar sem texto extra.
Indicadores de carregamento
Um giro linear infinito cria um spinner de carregamento em poucas linhas.
Como usar
- Escolha um efeito de animação.
- Ajuste a duração, o atraso, a curva e as repetições.
- Copie o código @keyframes e a regra animation.
Como funciona
Cada efeito é uma sequência de etapas @keyframes que usa só transform e opacity, as duas propriedades mais fluidas de animar. A prévia injeta essas etapas com nome próprio para nunca conflitar com as animações do site.
A propriedade animation é escrita na forma abreviada: nome, duração, curva e depois atraso, repetições, direção e modo de preenchimento só quando diferem do padrão.
Dicas para um melhor resultado
- De 200 a 500 ms para animações de interface: mais que isso parece lento.
- ease-out combina com entradas, ease-in com saídas.
- Evite animações infinitas em textos que precisam ser lidos: cansam.
- Defase um pouco o atraso de cada card para um efeito cascata.
Problemas comuns e soluções
O elemento volta ao lugar no fim
Adicione animation-fill-mode: forwards (ou both) para manter o estado final.
O elemento aparece e depois some durante o atraso
Com atraso, use both para o estado inicial (oculto) ser aplicado na hora.
A animação não repete
Uma animação CSS toca uma vez por renderização. Para reiniciar, remova e adicione a classe de novo com JavaScript.
Perguntas frequentes
O que é @keyframes?
Uma regra CSS que descreve as etapas de uma animação (de 0% a 100%). A propriedade animation a aplica a um elemento com duração, curva de velocidade e número de repetições.
Para que serve animation-fill-mode?
Define o que aparece antes e depois da animação. “both” mantém o estado inicial durante o atraso e o final depois: essencial para efeitos de entrada.
Animações CSS são fluidas?
Sim, principalmente as que usam só transform e opacity, como todos os efeitos daqui: o navegador as calcula na placa de vídeo.
Como respeitar pessoas sensíveis a movimento?
A aba “Com movimento reduzido” adiciona uma regra prefers-reduced-motion que desativa a animação quando o usuário pediu isso nas configurações do sistema.
Pesquisas relacionadas
Ainda com problema?
Pergunte no fórum: a categoria, a ferramenta, a ficha do seu dispositivo e o resultado do teste são preenchidos para você.