Gerador de Animações CSS com Keyframes

Design e Gráficos

Crie animações fluidas em CSS (pular, pulsar, tremer, girar) com durações, atrasos e curvas de transição ajustáveis.

Propriedades da animação

Duração1s
Atraso0s
CSS @keyframes & Animation
@keyframes customBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.animated-element {
  animation: customBounce 1s ease-in-out 0s infinite normal;
}
Apoio a Projeto Independente

Gostou do ToolsApp? Pague-nos um café

O ToolsApp funciona 100% no seu navegador, sem assinaturas e sem rastreamento de dados. Acreditamos que utilitários digitais essenciais devem ser livres e acessíveis para todos. Seu apoio nos ajuda a manter a plataforma e criar novas ferramentas!

100% No NavegadorGratuito para Todos

Como Usar?

1

Escolher Efeito

Escolha entre salto (bounce), pulsação (pulse), tremor (shake) ou rotação 3D (flip).

2

Ajustar Duração e Temporização

Ajuste a duração, o atraso e a função de temporização (timing function).

3

Copiar CSS

Exporte as regras completas de @keyframes e classes CSS.

Privacidade TotalTodos os cálculos e processamentos de arquivos ocorrem 100% localmente no seu navegador via JavaScript no lado do cliente.

Avaliações e Comentários de Usuários

Compartilhe sua experiência anonimamente. Moderado automaticamente por IA.

5.0
0 avaliações
5 / 5
0/500
Protegido pelo sistema de moderação automática do Groq AI

Avaliações Aprovadas (0)

Carregando avaliações...