6XC

Gerador de Animações CSS

Escolha uma predefinição de keyframes — rotação, pulso, quique, tremor, esmaecimento, deslizamento — ajuste a duração e as repetições, copie @keyframes + a classe.

637 visualizações

Animações CSS

Uma animação combina um bloco @keyframes (o que muda) com a propriedade animation (como ela é reproduzida: duração, timing, número de repetições). Diferentemente das transições, elas rodam sozinhas, sem precisar de hover ou troca de classe. Este gerador traz seis predefinições prontas e gera tanto os keyframes quanto uma classe pronta para usar.

Perguntas Frequentes

Animação ou transição — qual usar?

A transição reage a uma mudança de estado (hover, classe). A animação roda sozinha, pode repetir infinitamente e definir vários passos — use-a para spinners, pulsos de atenção e efeitos de entrada.

Como respeito usuários que preferem menos movimento?

Envolva a animação em @media (prefers-reduced-motion: no-preference) { … } ou desative-a na variante reduzida — usuários sensíveis a distúrbios vestibulares vão agradecer.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar