Ferramenta gratuita para devs

Construtor de Animações CSS

Construa animações CSS com quadros-chave visualmente. Pré-visualize em tempo real e copie o código CSS gerado instantaneamente.

Pré-visualizar

Duração2s

Iterações

Função de temporização

Direção

Keyframes

translateX (px)

translateY (px)

rotacionar (deg)

escala

opacidade

Cor

translateX (px)

translateY (px)

rotacionar (deg)

escala

opacidade

Cor

translateX (px)

translateY (px)

rotacionar (deg)

escala

opacidade

Cor

Generated CSS

.animated-element {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  animation-name: my-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
}

@keyframes my-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    transform: translateX(80px) translateY(-40px) rotate(180deg) scale(1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
}

Perguntas frequentes

Posso personalizar a saída gerada?

Sim. A ferramenta oferece várias opções de personalização para adaptar a saída às suas necessidades específicas. Ajuste as configurações antes de gerar ou regenere com diferentes opções.

O conteúdo gerado é de uso gratuito?

Sim. Tudo o que você gera com esta ferramenta é seu para uso pessoal, educacional ou comercial, sem quaisquer restrições ou requisitos de atribuição.

Isso requer uma conta?

Não. A ferramenta está pronta para uso imediato, sem inscrição, e-mail e registro. Basta abrir a página e começar a gerar.

Meus dados de entrada são mantidos em sigilo?

Sim. Todo o processamento acontece no seu navegador. Seus dados de entrada e saída gerada nunca são enviados para nenhum servidor externo.

Construtor de Animações CSS

Pré-visualizar

Keyframes

Generated CSS

Sobre esta ferramenta

Como usar

Perguntas frequentes

Construtor de Animações CSS

Pré-visualizar

Keyframes

Generated CSS

Ferramentas Relacionadas

CSS Minificador

CSS Flexbox Gerador de Layout

CSS Grid Gerador de Layout

Gerador de Gradientes CSS

Sobre esta ferramenta

Como usar

Perguntas frequentes

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk