Gerador de Animações CSS

Gerador de Animações CSS — Crie @keyframes com Prévia ao Vivo

Um editor visual para CSS @keyframes que roda inteiramente no seu navegador. Escolha um preset para carregar uma animação pronta, depois ajuste duração, easing, iterações, direção e cada keyframe individual (translateX, translateY, scale, rotate, opacity, cor de fundo). A prévia re-renderiza a cada mudança e a saída CSS é regerada como código canônico pronto para copiar, com um bloco @keyframes novo e uma linha shorthand animation.

O que exatamente esta ferramenta gera?

Dois blocos de CSS puro:

1. Um bloco `@keyframes <nome>` com cada stop que você definiu (0%, 100%, mais quaisquer stops extras adicionados). Cada stop emite apenas as propriedades que diferem do padrão — se você nunca mudar a cor de fundo, não aparece linha `background-color`. Se `translate(x, y)` for zero sem scale ou rotate, nenhum `transform` é escrito. Isso mantém a saída mínima e legível.

2. Um shorthand de animação: `animation: <nome> <duração>s <timing-function> <atraso>s <iterations> <direção> <fill-mode>;` — exatamente a ordem que os navegadores esperam, então você pode colá-lo sobre qualquer seletor.

Aplique a qualquer elemento adicionando o shorthand ao seletor desse elemento e garantindo que o bloco `@keyframes` esteja em escopo (mesmo stylesheet ou stylesheet pai).

Como a prévia ao vivo se mantém sincronizada com a saída CSS?

Cada mudança — um slider, um select, um input na tabela de keyframes — dispara três coisas em sequência:

1. O objeto state atualiza (nome, duração, keyframes, etc.).
2. O texto CSS é reconstruído e exibido no painel de saída com destaque de sintaxe.
3. Um elemento `<style>` com escopo e sufixo `__preview` no nome da animação é injetado (ou substituído) no head da página, depois a classe da caixa é removida e re-adicionada no próximo frame de animação para forçar reinício.

O sufixo `__preview` previne colisão de nome com uma cópia do mesmo CSS já na página, e o truque do reflow (`void box.offsetWidth`) é o que faz 'Reproduzir' funcionar mesmo quando a animação acabou. Não há JavaScript dirigindo o movimento — o compositor do navegador trata cada frame, por isso a prévia é suave mesmo em dispositivo modesto.

Quais presets estão incluídos e por onde começar?

Onze presets cobrem os padrões mais comuns:

- **fade-in / zoom-in / zoom-out** — animações de entrada e saída usando opacity e scale.
- **slide-in-left / slide-in-right** — translate desde fora da tela até a posição, ease-out para desaceleração natural.
- **bounce** — translate vertical com três picos, ease-in-out, infinito.
- **pulse** — scale a 1.05 e volta, infinito, útil para botões 'atenção'.
- **shake** — oscilação horizontal curta para estados de erro.
- **rotate-360** — uma revolução completa, easing linear, infinito — para spinners.
- **flip** — efeito de virar via rotateY simulado por scale rápido em X e volta.
- **color-cycle** — anima background-color através de stops de matiz.

Se não souber por onde começar, escolha o mais próximo da sua intenção e ajuste duração e easing. A maioria das animações de produção é 200–400ms (interações UI), 800–1500ms (entradas hero), ou infinitas (loaders).

O que a função de tempo realmente controla?

A função de tempo é a curva de easing — ela mapeia o tempo da animação (0 a 1) para um valor de progresso, que determina como a caixa se move entre dois keyframes quaisquer.

Os presets cobrem quatro famílias:

- **linear** — velocidade constante. Melhor para spinners, qualquer coisa que deva parecer mecânica.
- **ease / ease-in / ease-out / ease-in-out** — curvas cubic bézier embutidas. Melhor para movimento UI; `ease-out` é a mais comum porque parece natural (início rápido, parada suave).
- **cubic-bezier(0.34, 1.56, 0.64, 1)** — ultrapassagem. A coordenada y de P2 é maior que 1, então a animação passa do alvo e se acomoda. Ótimo para entradas lúdicas.
- **steps(N, end)** — salta em N passos discretos. Melhor para animações sprite-sheet ou efeitos de máquina de escrever onde você não quer interpolação suave.

A função de tempo aplica entre cada par de keyframes a menos que você sobrescreva por stop em CSS raw (esta ferramenta usa uma curva para toda a animação, cobrindo 95% dos usos reais).

Como os percentuais de keyframe são usados e qual o mínimo?

Um bloco `@keyframes` precisa de pelo menos dois stops — geralmente `0%` e `100%` — para descrever um estado inicial e final. Você pode adicionar mais stops para definir poses intermediárias; o navegador interpola entre stops consecutivos usando a função de tempo.

Por exemplo, um bounce que ergue a caixa no meio do caminho usa:

```
0% { transform: translateY(0); }
50% { transform: translateY(-40px); }
100% { transform: translateY(0); }
```

A tabela nesta ferramenta mantém os stops ordenados por percentual, e recusa apagar se só restarem dois (o mínimo). Dois aliases convenientes que CSS também aceita — `from` e `to` — mapeiam para `0%` e `100%` respectivamente, mas esta ferramenta sempre escreve a forma numérica por consistência.

Se quer que uma propriedade 'pule' em vez de interpolar, coloque dois stops adjacentes a um percentual de distância (ex. `49% { x: 0 } 50% { x: 100 }`).

Qual a diferença entre iteration count, direction e fill mode?

Estas três propriedades controlam como a animação se comporta no tempo:

- **iteration-count** — quantas vezes reproduzir. `1` (padrão) reproduz uma vez e para no estado não animado; `infinite` repete para sempre; qualquer número positivo (incluindo frações como `2.5`) reproduz esse número de vezes.
- **direction** — `normal` reproduz 0%→100% a cada vez; `reverse` reproduz 100%→0%; `alternate` inverte a cada iteração (0→100, depois 100→0, depois 0→100…); `alternate-reverse` é alternate começando de trás.
- **fill-mode** — o que mostrar quando a animação não está rodando. `none` (padrão) volta ao estado não animado no fim (e mostra o estado não animado durante o `delay`). `forwards` mantém o último keyframe aplicado depois que termina. `backwards` aplica o primeiro keyframe durante o atraso. `both` faz ambos.

Um padrão comum 'fade-in e permanecer' usa `iteration-count: 1`, `direction: normal`, e `fill-mode: forwards` para a caixa manter-se visível depois do fade in.

Como uso o CSS gerado no meu projeto?

Três passos:

1. Clique **Copiar** para pegar o bloco `@keyframes` e o shorthand `animation: …`.
2. Cole no seu stylesheet. O bloco `@keyframes` pode ficar em qualquer lugar do seu CSS — no topo, no final, dentro de uma tag `<style>`, em um arquivo `.css` ligado do seu HTML. Mantenha os dois juntos para clareza.
3. O shorthand está aplicado a `.element` por padrão — troque `.element` pelo seu seletor (ex. `.modal`, `#hero-image`, `.btn-attention`). Se quiser no hover, escope o shorthand para `:hover`. Se quiser condicionalmente, adicione ou remova a classe com JavaScript.

Se precisar da animação em múltiplos componentes com durações diferentes, defina `@keyframes` uma vez e escreva múltiplas linhas `animation:` com o mesmo nome mas durações distintas.

Para produção, você também pode usar a forma longhand (`animation-name`, `animation-duration`, etc.) se precisar sobrescrever só uma propriedade em uma media query — mas o shorthand é mais compacto para a declaração inicial.

Esta ferramenta é privada? Envia minha animação para algum lugar?

Sim, totalmente privada. Tudo roda no seu navegador:

- A prévia é um bloco `<style>` injetado na mesma página — sem gravação de canvas, sem ida ao servidor, sem telemetria.
- A saída CSS é gerada por template strings em JavaScript; nada é enviado a um servidor quando você muda um slider ou escolhe um preset.
- O botão Copiar usa diretamente a API de área de transferência do navegador.
- Nenhuma biblioteca de animação externa é carregada (sem GSAP, sem anime.js, sem Framer Motion) — a saída é CSS puro que os navegadores suportam desde o IE10.

Você pode verificar abrindo DevTools → Rede e observando o painel enquanto ajusta a animação — nenhuma requisição deveria disparar. Isso também significa que a ferramenta funciona offline depois que a página carrega, e qualquer `nome` que você escolha para sua animação fica no seu navegador.

Recursos Principais

• 11 animações pré-definidas: fade-in, slide-in-left/right, bounce, pulse, shake, rotate-360, zoom-in/out, flip, color-cycle
• Tabela de keyframes editável com translateX, translateY, scale, rotate, opacity, cor de fundo
• Prévia ao vivo re-renderiza a cada mudança; controles pausar/reproduzir
• 9 funções de tempo incluindo cubic-bezier (ultrapassagem) e steps()
• Direção (normal/reverse/alternate/alternate-reverse) e fill-mode (none/forwards/backwards/both)
• Iterações: 1, 2, 3, infinite, ou qualquer número positivo
• Adiciona keyframes intermediários no ponto médio, auto-ordena por percentual
• Mínimo de dois stops obrigatório; botão apagar desativado no mínimo
• Gera bloco @keyframes canônico e shorthand animation
• Saída CSS com sintaxe destacada para modo claro/escuro
• Copiar para a área de transferência com um clique
• Sem bibliotecas de animação externas — CSS puro, nativo do navegador
• Funciona offline após o primeiro carregamento
• Layout responsivo amigável para celular
• 100% no cliente — nada é enviado ao servidor