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** — uma virada 2D `rotate(180deg)` que alterna de ida 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.

O que o guard prefers-reduced-motion faz e por que importa?

Ative o interruptor **Proteção de movimento reduzido** acima da saída e o CSS gerado é envolvido para respeitar a preferência de movimento do usuário:

```
@media (prefers-reduced-motion: no-preference) {
.element { animation: myAnimation 1s ease 0s infinite normal none; }
}
@media (prefers-reduced-motion: reduce) {
.element { animation: none; /* estado do keyframe final, ex. opacity: 1; */ }
}
```

O movimento só reproduz para usuários que NÃO pediram movimento reduzido ao sistema operacional (Ajustes → Acessibilidade → Reduzir movimento no macOS/iOS, ou o equivalente no Windows/Android/GNOME). Usuários que pediram recebem `animation: none` mais o estado do keyframe final, então ainda veem a pose final correta sem o movimento.

É uma boa prática WCAG 2.1 (SC 2.3.3 Animação por interações, e apoia SC 2.2.2 Pausar, Parar, Ocultar). Respeitá-la é obrigatório na maioria dos guias de estilo front-end corporativos e é sinalizada pelas auditorias de acessibilidade Lighthouse e axe. O bloco `@keyframes` fica fora das media queries para poder ser reutilizado. A prévia continua animando deliberadamente independente do interruptor — é um auxílio de desenvolvimento; apenas o código copiado muda.

Como mantenho essas animações suaves (compositing GPU, will-change)?

Anime apenas as duas propriedades que o navegador pode compor na GPU sem repintar: `transform` e `opacity`. Os keyframes desta ferramenta usam exatamente essas (translate, scale, rotate, opacity) mais `background-color`. `background-color` não pode ser composto e dispara pintura a cada frame — tudo bem em um único elemento pequeno, mas evite em elementos grandes ou numerosos.

Para animações pesadas ou frequentes você pode dar uma dica ao compositor com `will-change: transform, opacity;` no elemento animado para que o navegador o promova à sua própria camada antecipadamente. Use com moderação: deixar `will-change` em dezenas de elementos desperdiça memória de GPU. Um padrão comum é adicioná-lo no `:hover`/logo antes da animação começar e removê-lo depois. Evite animar propriedades de layout (`width`, `height`, `top`, `left`, `margin`) — elas forçam reflow e travamentos; use `transform: translate()`/`scale()` no lugar, que é o que este gerador já faz.

Como depuro @keyframes nas DevTools do navegador?

As DevTools modernas têm um painel de Animações dedicado:

- **Chrome/Edge**: abra DevTools → pressione `Esc` para a gaveta → menu `…` → **Animations**. Dispare a animação e ela captura a linha do tempo; você pode percorrê-la, desacelerar a reprodução para 25%/10% e clicar em um keyframe para pular para a regra.
- **Firefox**: Inspetor → aba **Animações** mostra cada animação em execução com sua curva de easing e permite pausar/percorrer.

No painel **Estilos** você também pode editar a regra `@keyframes` ao vivo, alternar `animation-play-state` e passar o cursor sobre a amostra cubic-bezier para abrir um editor de curva de easing. Para confirmar o compositing GPU, ative **Rendering → Layer borders** (ou o painel Layers) — um elemento animado composto ganha sua própria camada. Se uma animação nunca começa, verifique se o nome `@keyframes` no shorthand corresponde exatamente ao nome do bloco e se ambos estão em escopo.

Preciso de prefixos de fornecedor para compatibilidade entre navegadores?

Não — para navegadores atuais. `@keyframes`, o shorthand `animation` e `prefers-reduced-motion` são sem prefixo e suportados em todos os navegadores evergreen (Chrome, Edge, Firefox, Safari) há anos. Esta ferramenta emite CSS limpo e sem prefixos de propósito.

Você só precisa de prefixos `-webkit-` (`@-webkit-keyframes`, `-webkit-animation`) se precisar dar suporte a Safari/iOS muito antigos (anteriores ao 9) ou navegadores Android legados — raro em 2025. Se seu pipeline de build usa **Autoprefixer** (via PostCSS, configurado por um `browserslist`), ele adicionará quaisquer prefixos necessários automaticamente no build, então mantenha a fonte sem prefixos e deixe a ferramenta decidir. `prefers-reduced-motion` não tem forma com prefixo; navegadores que não entendem a media query simplesmente ignoram o bloco `reduce` e caem na regra `no-preference`, que é um padrão seguro.

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
• Proteção prefers-reduced-motion: emite CSS acessível conforme WCAG com fallback de movimento reduzido
• 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