Qual a diferença entre animação CSS e transição?

transition interpola entre dois estados acionados por uma mudança (ex. hover). animation pode ser reproduzida automaticamente sem acionador e permite definir estados intermediários usando @keyframes.

Quais animações têm melhor desempenho?

Animações usando transform (translate, scale, rotate) e opacity são rápidas devido à aceleração de hardware. Animações em width, height ou margin causam reflow do navegador e são mais lentas.

O que é prefers-reduced-motion?

É uma media query para usuários que sofrem enjoo com animações. É recomendado usar @media (prefers-reduced-motion: reduce) para desativá-las ou reduzi-las para acessibilidade.

O uso de animation-fill-mode forwards é obrigatório?

Para animações como fade-in, se você não especificar forwards, o elemento retornará ao seu estado original (ex. opacity: 0) no final. É obrigatório se você quiser manter o estilo do quadro final na tela.

Meus dados são enviados para um servidor?

Não. Todo o processamento é concluído localmente no seu navegador e nenhum dado é enviado externamente.

🎞️

css-animation-generator,

Gerador de Animação CSS

Crie animações CSS (@keyframes) de forma intuitiva.
Suporta 12 predefinições, ajuste de parâmetros e pré-visualização.

🔒

Apenas Navegador

Seguro, sem envio de dados

⚡

Tempo Real

Pré-visualização instantânea

🎨

12 Predefinições

De fade a bounce

Configurações de Animação

Duração (seg) 0.6s

Atraso (seg) 0s

Repetições 1

infinite (loop)

Easing

Direção

Fill Mode

Código CSS

about,

Sobre o Gerador de Animação CSS

Este "Gerador de Animação CSS" é uma ferramenta gratuita que permite visualizar os movimentos de animação usando @keyframes do CSS e gerar automaticamente o código CSS necessário. Ele inclui 12 tipos de animações básicas (predefinições), como fade-in, slide, scale e bounce.

Você pode ajustar intuitivamente propriedades como Duração (segundos), Atraso, Easing, Repetições e Modo de Preenchimento usando controles deslizantes e caixas de seleção, e verificá-las em tempo real na área de pré-visualização.

Após o ajuste, basta copiar o código CSS gerado e colá-lo diretamente no seu projeto. Todo o processamento é feito dentro do navegador e não há comunicação com servidores externos, para que você possa usá-lo com segurança.

how to,

Passos para Criar Animações CSS

PASSO 1

Selecionar Movimento Base

Primeiro, alterne abas como "Desvanecer" ou "Deslizar" e selecione uma predefinição que se aproxime da animação que deseja criar.

PASSO 2

Ajustar Parâmetros

Altere a duração, o atraso e a velocidade de easing com controles deslizantes, e verifique o movimento real na área de visualização à direita.

PASSO 3

Copiar Código CSS

Quando o movimento estiver completo, clique no botão "Copiar Código" na área de saída e cole-o no seu arquivo CSS.

glossary,

Glossário de Animação CSS (Guia de Propriedades)

animation-duration (Duration): Especifica o tempo de reprodução (tempo para concluir) para uma repetição da animação. Especificado em segundos (s) ou milissegundos (ms).
animation-timing-function (Easing): Especifica a curva de velocidade (aceleração/desaceleração) da animação. Exemplos incluem "linear" para velocidade constante e "ease-in-out" para um início e fim graduais.
animation-delay (Delay): Especifica o tempo de espera (atraso) antes do início da animação.
animation-iteration-count (Iterations): Especifica o número de vezes que a animação se repete. Especificar "infinite" a repete sem fim.
animation-direction (Direction): Especifica a direção de reprodução da animação. Exemplos incluem "reverse" para reprodução de trás para frente, e "alternate", onde os ímpares avançam e os pares retrocedem.
animation-fill-mode (Fill Mode): Especifica como o estilo (estado) do elemento é mantido antes e depois da execução da animação. Definir como "forwards" mantém o estilo ao final da animação.
transition-property (Property): transition を適用するプロパティ名 (例: transform, opacity, all)。
transition-duration (Duration): transition が完了するまでの時間。
transition-timing-function (Easing): transition の速度変化のカーブ (Easing)。

faq,

Perguntas Frequentes (FAQ) sobre Animação CSS

Q.Qual a diferença entre animação CSS e transição?: transition interpola entre dois estados acionados por uma mudança (ex. hover). animation pode ser reproduzida automaticamente sem acionador e permite definir estados intermediários de forma fina usando @keyframes.
Q.Quais animações têm melhor desempenho?: Animações usando transform (translate, scale, rotate) e opacity são rápidas devido à aceleração de hardware. Animações em width, height ou margin causam reflow do navegador e são mais lentas.
Q.O que é prefers-reduced-motion?: É uma media query para usuários que sofrem enjoo com animações. É recomendado usar @media (prefers-reduced-motion: reduce) para desativá-las ou reduzi-las por questões de acessibilidade.
Q.O uso de animation-fill-mode forwards é obrigatório?: Para animações como fade-in, se você não especificar forwards, o elemento retornará ao seu estado original (ex. opacity: 0) no final. É obrigatório se você quiser manter o estilo do quadro final na tela.
Q.Meus dados são enviados para um servidor?: Não. Todo o processamento é concluído localmente no seu navegador e nenhum dado é enviado externamente.

use cases,

Casos de Uso de Animações CSS

📄

Animações de Carregamento de Página

Implemente um fade-in onde o conteúdo aparece suavemente, ou um slide-in de baixo para melhorar a primeira impressão da página.

🔘

Destaque de Botões e CTAs

Aplique animações como pulse (pulso) ou bounce (salto) aos botões de conversão para guiar naturalmente o olhar do usuário.

🖱️

Animações ao Rolar a Página

Combine a API Intersection Observer com as classes de animação CSS geradas para criar efeitos que são reproduzidos assim que um elemento entra na tela.

⏳