Gerador de animação CSS

Como usar

1. Escolha uma predefinição de animação : selecione entre as animações comuns, fade, deslizar, quique, rotação, pulsação, tremor e mais.
2. Personalize a duração e o comportamento : ajuste duração, atraso, função de easing, número de iterações e fill mode.
3. Copie o CSS : a definição @keyframes completa e a propriedade abreviada animation estão prontas para colar na sua folha de estilo.

Por que usar o gerador de animações CSS ?

As animações CSS dão vida às interfaces, chamando a atenção para elementos-chave, dando feedback visual e criando experiências de usuário refinadas. Escrever regras @keyframes à mão exige conhecer a sintaxe certa, os nomes de curvas e as boas combinações de propriedades. Este gerador oferece predefinições de animação cuidadas com pré-visualização em tempo real e permite ajustar cada parâmetro, produzindo CSS pronto para produção sem JavaScript nem biblioteca de animação.

Funcionalidades

• Predefinições de animação : fade, deslizar, quique, rotação, pulsação, tremor, virar, zoom etc., todas com pré-visualização em tempo real.
• Editor de keyframes personalizado : construa sua própria animação do zero com uma interface visual.
• Controle de timing : ajuste duração (ms/s), atraso, curva (linear, ease, cubic-bezier) e número de iterações.
• Modos de preenchimento : controle os comportamentos forwards, backwards, both e none.
• Nenhum JavaScript necessário : todas as animações geradas são em CSS puro, sem biblioteca nem framework.

Perguntas frequentes

Qual a diferença entre animation e transition em CSS ?

As transições CSS são disparadas por mudanças de estado (hover, foco, alternância de classe) e animam entre dois estados. As animações CSS usam @keyframes para definir vários estados e rodam independentemente da interação do usuário, podem fazer loop, inverter-se e iniciar automaticamente.

O que é animation-fill-mode e por que isso importa ?

O animation-fill-mode controla se o elemento conserva os estilos da animação antes que ela comece (backwards), depois que ela termina (forwards), ou ambos. Sem forwards, o elemento volta bruscamente ao seu estilo original ao final da animação.

As animações CSS têm bom desempenho ?

As animações que usam apenas transform e opacity são aceleradas pela GPU e bem fluidas. Evite animar propriedades de layout como width, height, margin ou top/left, elas disparam recálculos de layout e podem causar travamentos. Fique em transform e opacity para ter 60 fps.

O que as animações CSS realmente fazem

As animações CSS interpolam uma ou mais propriedades CSS entre quadros-chave definidos ao longo do tempo, produzindo movimento ou mudança visível sem JavaScript. O modelo tem duas peças: as regras @keyframes definem como uma animação parece em etapas baseadas em porcentagens (0% a 100%), e a propriedade abreviada animation (ou seus irmãos longhand animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode) diz ao navegador como reproduzir essa definição de quadros-chave. O navegador lida com toda a interpolação, suavização e tempo de quadros em C++, normalmente acelerado por GPU para mudanças de transform e opacity.

As animações diferem das transições CSS de duas maneiras. As transições disparam quando o estado de um elemento muda (um hover, uma classe alternada, um evento de focus) e interpolam entre exatamente dois valores: o antigo e o novo. As animações rodam independentemente do estado, seguem um número arbitrário de etapas de quadros-chave, podem fazer loop indefinidamente, podem reproduzir em reverso, e podem ser disparadas, pausadas e retomadas via CSS ou JavaScript. As transições são a ferramenta certa para «pular de A para B em meio segundo»; as animações são a ferramenta certa para «fazer loop deste pulso de atenção para sempre» ou «reproduzir esta sequência de entrada uma vez quando o elemento aparecer».

Para o design web moderno, as animações CSS substituem uma enorme quantidade do que costumava exigir bibliotecas JavaScript. Spinners, fade-ins, slide-ups, pulsos de atenção, checkmarks de sucesso: todos são agora padrões CSS padrão. O compromisso é a expressividade para sequências complexas. As animações CSS podem fazer muito mas deixam de ser convenientes em torno de 5 a 7 etapas de quadros-chave com mudanças de propriedades sincronizadas; para animações storyboard, sequências vinculadas a rolagem, ou qualquer coisa dinâmica que dependa do estado JavaScript, bibliotecas dedicadas (GSAP, Framer Motion, Web Animations API) continuam sendo a melhor escolha.

Como esta ferramenta funciona nos bastidores

Quando você escolhe um preset (por exemplo, «bounce» ou «fade-in») a ferramenta carrega uma string @keyframes predefinida na área de pré-visualização e aplica a propriedade de animação à caixa de pré-visualização. Os quadros-chave são CSS real, não um formato personalizado: o que você vê é o que você obtém para copiar. Os sliders atualizam os valores de tempo de animação (duração, atraso, contagem de iterações) editando a propriedade animation em linha em tempo real, então a pré-visualização reflete cada mudança instantaneamente sem recarregar a página.

A seleção da função de suavização usa os valores padrão de timing-function do CSS: linear (velocidade constante), ease (padrão, início e fim lentos), ease-in (início lento), ease-out (fim lento), ease-in-out (início e fim lentos), ou cubic-bezier(x1, y1, x2, y2) para curvas personalizadas. A curva de animação visível é calculada pela implementação nativa de timing-function do navegador; a pré-visualização é a saída realmente renderizada pelo navegador, não uma simulação JavaScript.

A caixa de código mostra o CSS completo que você precisa colocar em uma folha de estilo: tanto o bloco @keyframes quanto a declaração .sua-classe { animation: ... }. Clique em «Copiar CSS» e ambos são escritos em sua área de transferência como um único bloco de texto. Nenhum arquivo é gerado, nenhum servidor processa nada, e a ferramenta não tem backend para chamar. A pré-visualização, a geração de código e a escrita na área de transferência acontecem todas em JavaScript no seu dispositivo. Atualize a página e sua configuração personalizada se foi a menos que você a tenha copiado primeiro.

Breve história da animação web

• Flash domina o movimento web, 1996 a 2010.Adobe Flash (originalmente Macromedia) é a ferramenta principal para animação web ao longo do início dos anos 2000. Baseado em vetores, conduzido por linha do tempo, com um runtime de plugin personalizado. Em 2010, o Flash alimenta a maioria dos anúncios em banner, o player de vídeo do YouTube, e jogos da era Newgrounds. Então dispositivos móveis o matam: o iPhone nunca suportou Flash, o Android abandona o suporte em 2012, navegadores depreciam o plugin em 2020.
• Transições CSS no WebKit, 2007.O motor WebKit da Apple envia -webkit-transition em 2007, a primeira primitiva de animação CSS comumente implantada. Usada muito em aplicativos web do iPhone inicial. Em 2009, a propriedade está no processo de especificação CSS e é enviada sem prefixo entre navegadores até 2014.
• Módulo CSS Animations Nível 1, 2009.WebKit adiciona -webkit-animation e @-webkit-keyframes em março de 2009 antes do rascunho do W3C CSS Animations Module Nível 1 (também 2009). Firefox segue na versão 5 (2011), IE na versão 10 (2012). A era «sem necessidade de JavaScript para animações básicas» começa.
• GSAP e bibliotecas de animação JS, a partir de 2008.O método .animate() do jQuery (2006) inicia a era das bibliotecas de animação JS; GreenSock Animation Platform (GSAP, lançado em 2008) torna-se o padrão ouro para animação sequenciada complexa, scrubbing de linha do tempo e desempenho. Usado em Disney, Coca-Cola e sites de marketing de nível Awwwards. Continua a coexistir com animações CSS: GSAP para complexidade sequenciada, CSS para simplicidade declarativa.
• Web Animations API padronizada, 2014 a 2018.A especificação W3C Web Animations fornece uma API JavaScript que expõe animações CSS e adiciona controle programático: element.animate(keyframes, options). Chrome envia na versão 36 (2014), Firefox na versão 75 (2020), Safari na versão 13.1 (2020). Preenche a lacuna entre CSS declarativo e JavaScript com poder total de biblioteca.
• Animações conduzidas por rolagem chegam, 2023 a 2024.O módulo CSS Scroll-driven Animations introduz animation-timeline, permitindo que animações CSS se vinculem à posição de rolagem em vez de (ou além de) tempo. Chrome 115 (julho de 2023) envia primeiro; Safari e Firefox adicionam suporte ao longo de 2024 e 2025. Desbloqueia efeitos de parallax, indicadores de progresso de rolagem e animações de revelação de seção em CSS puro.

Fluxos do mundo real

• Spinners de carregamento e estados de esqueleto.Um carregador giratório (animation: spin 1s linear infinite com um quadro-chave de rotação de 360 graus) é o uso de animação CSS mais comum. Telas de esqueleto com um efeito de brilho deslizante usam uma animação translateX ou background-position. Ambos são essenciais para o desempenho percebido: enquanto o conteúdo carrega, a animação diz aos usuários «estamos trabalhando nisso» em vez de «está quebrado».
• Micro-interações de hover e foco.Botões que pulsam sutilmente no hover, cartões que se elevam no foco, ícones que oscilam no clique: essas micro-interações adicionam personalidade sem intrusão. Use animações com animation-iteration-count: 1 e animation-fill-mode: forwards para comportamento «reproduzir uma vez e permanecer», ou transições para padrões «pular para o estado de hover».
• CTAs que chamam atenção.Um botão de chamada à ação principal com um pulso lento e contínuo ou animação de brilho-respiração chama o olhar sem ser agressivo. Combine transform: scale(1) to scale(1.05) com animation-iteration-count: infinite e duração de 3 a 4 segundos para um ritmo respiratório calmo. Evite pulsos mais rápidos; eles parecem maníacos e irritam os usuários rapidamente.
• Entrada de página e revelação de seção.Animações de fade-in e slide-up no carregamento da página ou rolagem para a vista criam chegadas polidas. CSS lida com o caso simples (animações que rodam uma vez no carregamento); para entradas acionadas por rolagem, IntersectionObserver em JavaScript adiciona uma classe que aciona a animação quando um elemento entra no viewport. Animações modernas conduzidas por rolagem estão começando a substituir este padrão em CSS puro.
• Feedback de sucesso e tremores de erro.O feedback de submissão de formulário usa dicas de animação: um salvamento bem-sucedido mostra um check verde com uma breve animação bounce-in, enquanto um erro sacode brevemente o formulário (quadros-chave translateX alternando -10px e +10px ao longo de 0,4 segundos). Esses pequenos toques fazem as interações se sentirem responsivas e intencionais.
• Hero de marketing e sequências narrativas.Páginas de aterrissagem e seções hero frequentemente usam animações de entrada encenadas (logo desbota para dentro, manchete desliza para cima, botão CTA pulsa) para focar a atenção através de uma sequência projetada. Atrasos de animação (animation-delay: 0s, 0.3s, 0.6s) em três elementos irmãos criam um efeito escalonado sem precisar de orquestração JavaScript.

Armadilhas comuns e o que significam

• Animar propriedades de layout mata o desempenho.Propriedades como width, height, margin, padding, top, left, right, bottom e font-size acionam recálculo de layout em cada quadro de animação, frequentemente causando jank ou desempenho abaixo de 60fps. Use transform: translateX() em vez de left, transform: scale() em vez de width/height, e opacity em vez de visibility. Transform e opacity são compostos por GPU e não acionam layout.
• Ignorar prefers-reduced-motion prejudica acessibilidade.Alguns usuários experimentam enjoo de movimento ou distúrbios vestibulares desencadeados por animações web. A media query prefers-reduced-motion: reduce permite que usuários optem por não participar no nível do SO. Envolva suas animações decorativas em @media (prefers-reduced-motion: no-preference) { ... } ou defina animation-duration: 0.01ms para usuários que solicitam movimento reduzido. Animações essenciais (spinners de carregamento) podem permanecer, mas as decorativas devem respeitar a preferência.
• Uso excessivo de will-change prejudica memória.A propriedade will-change sugere ao navegador promover um elemento para GPU antecipadamente, o que pode suavizar animações. Mas adicionar will-change a muitos elementos consome memória GPU significativa. Aplique-a apenas a elementos que você realmente anima, idealmente adicionado via JavaScript pouco antes do início da animação e removido depois. Definir will-change: transform em cada elemento da página é um antipadrão.
• Confusão com animation-fill-mode.Por padrão, um elemento retorna ao seu estilo original depois que uma animação termina. Para manter o estado final da animação, use animation-fill-mode: forwards. Para iniciar o elemento no primeiro estado da animação antes do atraso passar, use backwards. Para fazer ambos, use both. Muitos bugs «por que meu elemento volta?» vêm de perder esta propriedade. O valor padrão é none, que raramente é o que você quer para animações de entrada de um tiro.
• Animações infinitas drenam bateria móvel.Uma animação animation-iteration-count: infinite roda para sempre, mantendo a GPU ativa e a taxa de atualização da tela no máximo. Em dispositivos móveis, isso drena bateria notavelmente. Para animações contínuas decorativas (um logo que respira suavemente), considere pausar a animação quando a página está oculta (document.visibilityState !== 'visible'), ou limitar a contagem de iterações a um número finito como 3 a 5 em vez de infinito.
• Conflitos de nome de quadros-chave em escala.Os nomes de regra @keyframes são globais dentro de uma folha de estilo: @keyframes fade em um arquivo colide com @keyframes fade em outro. Para grandes bases de código, dê namespace aos seus nomes de quadros-chave (@keyframes app-fade-in, @keyframes hero-slide-up) para evitar sobrescritas silenciosas. Módulos CSS e bibliotecas CSS-em-JS lidam com isso automaticamente com hash de escopo.

Privacidade: tudo roda no seu navegador

Ferramentas geradoras de CSS vêm em dois sabores: páginas HTML simples rodando JavaScript do lado do cliente (privadas, rápidas) e editores em nuvem que salvam seus projetos (colaborativos mas com compromissos de privacidade). Esta ferramenta é do primeiro tipo. Seus valores de slider, seu preset selecionado, seu CSS gerado: tudo permanece na sua sessão do navegador. Atualize a página e o estado se vai a menos que você tenha copiado o CSS primeiro. Nenhum servidor armazena suas escolhas de animação, nenhuma análise rastreia quais presets você testou, e nenhuma conta é necessária.

A propriedade de privacidade importa principalmente para trabalho de design proprietário. Um estúdio prototipando animações para um projeto de cliente confidencial, um desenvolvedor trabalhando nas micro-interações de um aplicativo não anunciado, ou um designer iterando em uma campanha de marca: qualquer contexto onde o histórico de iteração ou o design em andamento poderia vazar informação sobre o trabalho. Com esta ferramenta, não há nada capturado porque nada é enviado. Abra a aba Rede do navegador e você verá zero solicitações de saída durante o uso; apenas o carregamento inicial da página busca o HTML e JavaScript.

Quando outra ferramenta é a escolha certa

• GSAP para animações sequenciadas complexas.GreenSock Animation Platform (GSAP) lida com animações sincronizadas, sequenciadas e scrubeáveis muito melhor que CSS puro. Para animações de marketing storyboard, sequências vinculadas a rolagem com capacidade de reversão, ou qualquer coisa que dependa de mudanças de estado JavaScript, GSAP é o padrão da indústria. Grátis para a maioria dos casos de uso (com uma licença de clube para alguns plugins).
• Lottie para animações criadas por designers.Lottie (originalmente do Airbnb) renderiza animações do After Effects como JSON, permitindo que designers criem movimento complexo no After Effects e exportem diretamente para web/iOS/Android. Para animações que excedem o que quadros-chave codificados à mão podem praticamente produzir (animações de personagens, morphing complexo, sequências de ilustração), o pipeline de design-para-código da Lottie vence sobre animação CSS manual.
• Web Animations API para controle JavaScript.Se você precisar iniciar, pausar, reverter ou modificar animações do JavaScript em tempo de execução, a Web Animations API (element.animate(keyframes, options)) é mais ergonômica que lutar com classes CSS. Retorna um objeto Animation com métodos como .pause(), .play(), .reverse(), e uma Promise .finished. Suporte nativo do navegador, nenhuma biblioteca necessária.
• requestAnimationFrame para loops de jogo.Para animações conduzidas por lógica JavaScript contínua (loops de jogo, simulações físicas, visualizações de dados em tempo real), requestAnimationFrame com atualizações manuais de propriedades por quadro é a abordagem certa. Animações CSS são declarativas e predefinidas; rAF dá controle por quadro sobre o que atualizar. Use Canvas ou WebGL quando você também precisa de controle a nível de pixel.

Mais perguntas frequentes

Como faço uma animação tocar apenas uma vez?

Defina animation-iteration-count: 1 (que é o padrão se não especificado). Para fazer o elemento permanecer no estado final da animação após ela completar (em vez de voltar ao estilo original), também defina animation-fill-mode: forwards. A abreviação combinada é animation: fadeIn 0.5s ease-out forwards;.

Posso pausar e retomar uma animação?

Sim, com animation-play-state: paused (ou running). Alterne esta propriedade via JavaScript (por exemplo, em um clique de botão) ou em CSS via :hover para padrões «pausa no hover». A animação congela em seu ponto atual e retoma de lá quando definida de volta para running, sem perda de progresso. Isso funciona o mesmo em transições mas apenas a propriedade animation-play-state existe para controle de pausa em tempo de execução.

Como acionar uma animação em clique ou rolagem?

Para gatilhos de clique, alterne uma classe CSS via JavaScript: element.classList.toggle('animate-in'). A animação roda quando a classe é adicionada. Para gatilhos de rolagem, use IntersectionObserver para detectar quando o elemento entra no viewport e adicione a classe então. Para navegadores modernos, animações CSS conduzidas por rolagem permitem vincular o progresso da animação diretamente à posição de rolagem sem JavaScript via animation-timeline: scroll().

Por que minha animação pisca ou gagueja?

A maioria dos problemas de piscamento/gagueira vêm de animar propriedades que acionam layout (width, height, top/left) em vez de equivalentes baseados em transform. Mude left: 0 para transform: translateX(0) e a animação deveria suavizar. Outras causas: overdraw de muitas camadas semi-transparentes, layout thrashing por JavaScript lendo e escrevendo estilos no mesmo quadro, ou sombras e filtros excessivos no elemento animado.

Devo usar animações em interfaces críticas para acessibilidade?

Use-as, mas respeite prefers-reduced-motion. As diretrizes WCAG 2.1 recomendam fornecer a opção de desativar movimento não essencial. Envolva animações decorativas em @media (prefers-reduced-motion: no-preference) para que usuários que definem a preferência do SO obtenham uma experiência estática. Animações de feedback essenciais (indicadores de carregamento, tremores de erro) podem ser mantidas; as puramente decorativas devem ser opt-in para usuários sensíveis.

Posso usar cubic-bezier para curvas de suavização personalizadas?

Sim. A função de tempo cubic-bezier(x1, y1, x2, y2) permite definir qualquer curva de suavização com dois pontos de controle. Cada valor x está entre 0 e 1 (representando tempo), valores y podem ser negativos ou maiores que 1 (permitindo efeitos de overshoot e ressalto). Use nossa ferramenta Cubic Bezier ou o clássico cubic-bezier.com de Lea Verou para escolher uma curva visualmente. Alternativas comuns de preset: ease, ease-in, ease-out, ease-in-out, e a variável CSS com alias linear cubic-bezier(0.25, 0.1, 0.25, 1) (ease padrão).