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.

Gerador de Animação CSS

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

Duração: 1sAtraso: 0sFunção timingLoop infinitoIteraçõesDireçãoFill mode

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

Escolha um preset (fade, slide, bounce, etc.).
Ajuste duração, atraso, easing, iteração, direção e fill mode.
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

Gerador de Curva Cubic-Bezier CSS

Arraste os pontos de controle para projetar uma curva de easing CSS — preview do movimento, copie cubic-bezier().

Cor 0 0

Playground de CSS Flexbox

Escolha visualmente flex-direction, justify-content, align-items e gap — copie o CSS ou a classe Tailwind.

Desenvolvimento 0 0

Playground de CSS Grid

Escolha visualmente grid-template-columns / rows, gap e alinhamento — copie o CSS para o projeto.

Desenvolvimento 0 0

Playground de Filtros CSS

Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.

Cor 0 0

Pré-visualização de CSS color-mix()

Compare como a função moderna CSS color-mix() mistura duas cores em diferentes espaços de interpolação (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — amostras ao vivo, hex computado, faixa de gradiente completa por espaço e CSS copiável.

Cor 0 0

Gerador Open Graph & Twitter Card

Preencha um formulário, receba um bloco `<meta>` pronto pra colar — Open Graph pra Facebook / LinkedIn / Slack e tags Twitter Card pra X / Discord.

Desenvolvimento 0 0