AZ Tools

Gerador de Animação CSS

Desenvolvimento

Escolha um de seis padrões comuns (fade, slide, bounce, spin, pulse, shake) e ajuste duração, atraso, função de timing, iteração, direção e fill mode com sliders ao vivo. O preview executa a animação num elemento DOM real para verificar como fica antes de copiar o bloco @keyframes mais o shorthand `.box { animation: … }` para seu projeto.

—
Preset

Preview

CSS gerado

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation: fade 1s ease 0s 1 normal none;
}

CSS gerado usa propriedades padrão — sem prefixos. Todos os navegadores modernos suportam unprefixed.

Como usar

  1. Escolha um preset (fade, slide, bounce, etc.).
  2. Ajuste duração, atraso, easing, iteração, direção e fill mode.
  3. Veja o preview e copie o CSS gerado.

Perguntas frequentes

Por que meu elemento volta ao estado inicial no fim?
`animation-fill-mode` padrão é `none` — estilos só aplicam durante a animação. Defina fill mode como `forwards` para manter o estado final.
Diferença entre iteração `1` e `infinite`?
Iteração roda os keyframes esse número de vezes e para. `infinite` loopa pra sempre — útil para spinners mas consome CPU em elementos fora da tela.
Posso usar esses keyframes com `prefers-reduced-motion`?
Sim, envolva sua regra `.box` em `@media (prefers-reduced-motion: no-preference) { … }` pra que usuários sensíveis a movimento optem fora automaticamente.
Por que easing não aparece em `spin`?
Spin é rotação a velocidade constante — easing numa variável rotacional única parece quase linear. Easing aparece melhor em propriedades com estados inicial/final como opacity ou translate.

Ferramentas relacionadas

Decodificador JWT

Decodifique um JSON Web Token para inspecionar cabeçalho, claims e expiração.

Desenvolvimento00

Gerador de UUID

Gere UUIDs v4 aleatórios em lote, com cópia.

Desenvolvimento00

Gerador de Hash (SHA)

Gere hashes SHA-1, SHA-256, SHA-384 e SHA-512 a partir de texto.

Desenvolvimento00

Codificador / Decodificador de URL

Codifique texto para URLs em porcentagem, ou decodifique URLs em texto.

Desenvolvimento00

Codificador / Decodificador Base64

Codifique texto em Base64 ou decodifique Base64 de volta em texto.

Desenvolvimento00

Formatador e Validador de JSON

Formate, embeleze, minifique e valide JSON no seu navegador.

Desenvolvimento00