Softonic

Gerador de Animação CSS

Etapa 1 / 2
Predefinição
Próximo

Escrever @keyframes do zero é tedioso: você escolhe porcentagens, adivinha propriedades, recarrega, observa, ajusta. Este gerador oferece seis animações prontas (desvanecimento, deslizar para cima, quicar, girar, pulsar e sacudir) e permite definir o nome da animação, a duração, o easing, o número de iterações e a direção. O resultado é reproduzido em tempo real e, quando você estiver satisfeito, pode copiar o bloco @keyframes gerado e a propriedade abreviada animation.

Como criar uma animação CSS

  1. 1

    Escolha uma predefinição

    Escolha uma das seis animações integradas: desvanecimento, deslizar para cima, quicar, girar, pulsar ou sacudir.

  2. 2

    Dê um nome à animação

    Atribua aos keyframes um identificador CSS válido, como `cardIn` ou `fadeIn`. O mesmo nome é usado na abreviação `animation`.

  3. 3

    Defina tempo e repetição

    Duração em segundos, easing (ease, ease-in, ease-out, ease-in-out, linear ou spring), número de iterações (1, 2, 3 ou infinite) e direção (normal, reverse, alternate ou alternate-reverse).

  4. 4

    Copie o CSS

    A regra `@keyframes` gerada e a abreviação `animation:`, prontas para colar na sua folha de estilos.

Anatomia de uma animação

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Oito propriedades na abreviação: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Opções de easing

O gerador oferece seis funções de easing:

Easing cubic-bezier() Sensação
linear n/a Velocidade constante
ease-in 0.42, 0, 1, 1 Início lento, fim rápido
ease-out 0, 0, 0.58, 1 Início rápido, fim lento
ease-in-out 0.42, 0, 0.58, 1 Lento-rápido-lento
ease (padrão) 0.25, 0.1, 0.25, 1 Padrão suave
spring 0.68, -0.55, 0.27, 1.55 Ultrapassa e estabiliza

Anime as propriedades certas

O navegador pode animar qualquer propriedade, mas apenas algumas animam suavemente na GPU sem acionar layout ou pintura:

Baratas (somente composição): transform, opacity, filter.

Caras (layout/pintura): width, height, top, left, margin, padding, background-color.

Animações a sessenta quadros por segundo em width e top são possíveis em elementos pequenos, mas vão falhar no celular se você animar muitas de uma vez. Para movimentos complexos, prefira sempre transform: translate(...) em vez de top / left, e transform: scale(...) em vez de largura/altura animadas.

will-change: use com moderação

Pedir ao navegador para pré-alocar uma camada de composição pode ajudar na fluidez:

.card { will-change: transform; }

Mas consome memória. Aplique logo antes de a animação disparar e remova ao terminar. Definir will-change: transform permanentemente em muitos elementos pode prejudicar mais do que ajudar.

Movimento reduzido

Alguns usuários têm sensibilidade ao movimento e definem preferências do sistema:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Respeite essa configuração. Ofereça uma mudança instantânea de estado ou um desvanecimento bem sutil como alternativa.

Perguntas frequentes

CSS para movimento simples, declarativo e pontual. Web Animations API (element.animate()) para temporização controlada por JavaScript, keyframes dinâmicos, pausa e controle de reprodução. Ambas rodam no compositor; nenhuma é inerentemente mais rápida.

Quase sempre porque você está animando uma propriedade que aciona o layout (width, top, margin) em vez de transform. Troque para translate() e scale() e o engasgo geralmente desaparece.

Sim, animation: a 1s, b 1s 1s, c 1s 2s; executa três animações em sequência por meio de atrasos escalonados. Este gerador produz uma única animação, então adicione você mesmo as entradas extras na abreviação. Para coreografias mais complexas, use a Web Animations API ou uma biblioteca como GSAP.

Faz o elemento assumir o estado from antes de a animação começar (durante o atraso) e manter o estado to depois que ela termina. Sem both, o elemento volta ao estilo anterior à animação ao final. O gerador mantém a abreviação mínima; acrescente o fill mode você mesmo se precisar.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas