Quais propriedades de transformação posso animar?

Você pode animar translateX, translateY, scale e rotate, mais opacidade. Cada propriedade é definida independentemente nas paradas de keyframe 0%, 50% e 100%.

Quais funções de temporização estão disponíveis?

O construtor inclui pré-definições de ease, linear, ease-in, ease-out e ease-in-out, mais uma opção personalizada cubic-bezier para que você crie uma curva de aceleração única.

Posso fazer a animação loopar para sempre?

Sim. Defina a contagem de repetição como Infinita e o CSS gerado usará animation-iteration-count: infinite, fazendo com que a animação loop continue indefinidamente.

Preciso saber CSS para usar esta ferramenta?

Não. O construtor é totalmente visual — apenas mova os sliders e selecione valores de dropdowns. O CSS é gerado automaticamente para você e está pronto para copiar em qualquer projeto.

O CSS gerado é compatível com todos os navegadores modernos?

Sim. A saída usa @keyframes padrão e a propriedade abreviada de animação, que são suportadas por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge, sem nenhum prefixo de fornecedor.

Esta ferramenta envia meus dados?

Não. Tudo é executado no seu navegador, então seus dados nunca saem do seu dispositivo — e funciona até offline depois que a página carrega.

🎬 Construtor de Keyframes CSS

Projete animações de keyframes CSS em segundos — defina transform e opacidade em cada parada, visualize a animação em tempo real e copie o código @keyframes pronto para colar. Nenhuma instalação, nenhum cadastro, executa totalmente no seu navegador.

Nome da animação

Duração (s)

Tempo

Repetir

Privado por design. Esta ferramenta funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado, e funciona offline.

Sobre

O Construtor de Keyframes CSS permite que você crie animações @keyframes sem escrever uma única linha de código manualmente. Você define propriedades de transformação — traduzir (X e Y), escalar e girar — mais opacidade em três paradas principais: 0%, 50% e 100%. A duração da animação, uma função de temporização (facil, linear, ease-in, ease-out, ease-in-out ou uma curva personalizada cubic-bezier), e o número de repetições (finito ou infinito) são todos configuráveis no painel. Uma pré-visualização animada ao vivo atualiza instantaneamente para que você possa ajustar os valores até que o movimento pareça certo. Quando estiver pronto, clique em Copiar e o bloco completo @keyframes — incluindo a notação abreviada de animação — será colocado em seu clipboard e pronto para colar em seu folha de estilo. Tudo executa no navegador sem upload de arquivos e sem enviar dados para lugar algum.

Como usar

Defina os valores de transformação — traduzir X/Y, escalar e girar — e opacidade para a parada de 0% (o início da animação).
Ajuste os valores de 50% para definir o ponto médio do movimento, ou deixe-os como padrão para criar uma transição simples de dois estados.
Defina os valores de 100% para o estado final, depois configure a duração (em segundos), função de temporização e número de repetições.
Observe a pré-visualização ao vivo atualizar em tempo real e ajuste qualquer valor até que a animação fique exatamente certa.
Clique em Copiar CSS para copiar o bloco completo @keyframes e a propriedade de animação para seu clipboard, depois cole diretamente em seu folha de estilo.

Perguntas frequentes

Quais propriedades de transformação posso animar?: Você pode animar translateX, translateY, scale e rotate, mais opacidade. Cada propriedade é definida independentemente nas paradas de keyframe 0%, 50% e 100%.
Quais funções de temporização estão disponíveis?: O construtor inclui pré-definições de ease, linear, ease-in, ease-out e ease-in-out, mais uma opção personalizada cubic-bezier para que você crie uma curva de aceleração única.
Posso fazer a animação loopar para sempre?: Sim. Defina a contagem de repetição como Infinita e o CSS gerado usará animation-iteration-count: infinite, fazendo com que a animação loop continue indefinidamente.
Preciso saber CSS para usar esta ferramenta?: Não. O construtor é totalmente visual — apenas mova os sliders e selecione valores de dropdowns. O CSS é gerado automaticamente para você e está pronto para copiar em qualquer projeto.
O CSS gerado é compatível com todos os navegadores modernos?: Sim. A saída usa @keyframes padrão e a propriedade abreviada de animação, que são suportadas por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge, sem nenhum prefixo de fornecedor.
Esta ferramenta envia meus dados?: Não. Tudo é executado no seu navegador, então seus dados nunca saem do seu dispositivo — e funciona até offline depois que a página carrega.