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

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de textura de ruído

Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.

Gerador de Configuração Webpack

Crie um webpack.config.js para webpack 5 a partir de um formulário curto: defina o entry, a pasta de saída e o modo, e ative TypeScript, Babel, um loader CSS, HtmlWebpackPlugin e um servidor de desenvolvimento.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Ferramenta disponível em outros idiomas