Gerador de animações CSS
Crie animações CSS com keyframes usando um editor visual de linha do tempo
Configurações da animação
Animações predefinidas
Quadros-chave
0% → 100%
Quadro-chave · 0%
Quadro-chave · 100%
Prévia em tempo real
CSS gerado
@keyframes myAnimation {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-delay: 0s;
}Edite os quadros-chave e reproduza novamente para verificar sua animação.
Exemplos rápidos de transformação
translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)Ex.: skewX(10deg) / skewY(-5deg)Ex.: perspective(400px) rotateY(180deg)Sobre o gerador de animações CSS
Nosso gerador de animações CSS grátis permite criar animações profissionais com keyframes de forma visual, sem escrever código complexo do zero. Configure todos os aspectos da sua animação, da duração e das funções de temporização às propriedades de cada keyframe, e veja os resultados na hora em uma visualização ao vivo que se atualiza em tempo real.
Seja para um discreto efeito de fade-in, uma animação de salto chamativa ou uma animação personalizada em várias etapas, esta ferramenta oferece 10 predefinições e um editor completo de keyframes. Cada predefinição é totalmente personalizável, então você pode usá-las como ponto de partida e ajustar cada propriedade, incluindo transform, opacity e cor de fundo, em qualquer ponto percentual.
O gerador produz um código CSS pronto para produção e limpo, com a sintaxe @keyframes correta e propriedades de animação individuais. Basta copiar o código gerado e colá-lo na sua folha de estilos. Todo o processamento acontece no seu navegador, sem envio a servidores, mantendo o seu trabalho privado e seguro.
Principais recursos
- Editor visual de keyframes com controles de transform, opacity e background-color por keyframe
- 10 predefinições de animação prontas: Bounce, Fade In, Fade Out, Slide In Left, Slide In Right, Spin, Pulse, Shake, Flip e Zoom In
- Painel de visualização ao vivo com repetição instantânea para testar animações
- Controles completos das propriedades de animação, incluindo duração, função de temporização, número de repetições, direção, modo de preenchimento e atraso
- Suporte a funções de temporização cubic-bezier personalizadas para curvas de easing precisas
- Adicione e remova keyframes em qualquer ponto percentual (0%, 25%, 50%, 75%, 100% ou personalizado)
- Saída CSS limpa com @keyframes e propriedades de animação individuais, pronta para produção
- Cópia para a área de transferência com um clique, para integração imediata aos seus projetos
- Nomes de animação personalizados para um código organizado e semântico
- Suporte completo ao modo escuro para editar com conforto em qualquer ambiente
Como usar o gerador de animações CSS
- Escolha um ponto de partida: selecione uma das 10 predefinições, como Bounce, Fade In ou Spin, ou comece com uma animação em branco.
- Ajuste as propriedades da animação: defina a duração, a função de temporização, o número de repetições, a direção, o modo de preenchimento e o atraso com os controles intuitivos.
- Edite os keyframes: adicione, remova ou modifique keyframes em qualquer ponto percentual. Defina valores de transform, opacity e cores de fundo para cada keyframe.
- Visualize a animação: acompanhe a visualização ao vivo se atualizar em tempo real. Clique em Repetir para reiniciar a animação e conferir o resultado.
- Copie o código CSS: clique no botão Copiar CSS para copiar para a área de transferência o código gerado de @keyframes e das propriedades de animação.
- Cole no seu projeto: adicione o CSS copiado à sua folha de estilos e aplique a classe da animação aos seus elementos HTML.
Casos de uso
- Microinterações: adicione efeitos de hover sutis, animações de botões e sinais de retorno visual para melhorar o engajamento do usuário.
- Indicadores de carregamento: crie spinners personalizados, efeitos de pulso e animações de telas skeleton para estados de carregamento.
- Transições de página: crie efeitos de deslizar, fade-in e zoom para elementos da página que se animam ao rolar ou ao carregar.
- Chamadas de atenção: crie animações de tremor, salto e pulso para atrair a atenção do usuário para elementos importantes da interface.
- Prototipagem de design system: prototipe e padronize rapidamente padrões de animação na biblioteca de componentes da sua equipe.
- Aprender animações CSS: experimente keyframes, funções de temporização e propriedades de animação em um ambiente visual.
- Efeitos de apresentação: crie elementos animados para apresentações e portfólios na web.
Perguntas frequentes
Esta ferramenta é gratuita?
Sim, o gerador de animações CSS é totalmente gratuito, sem limites de uso. Você pode criar animações ilimitadas, usar todas as predefinições e copiar o código CSS gerado sem nenhuma restrição.
Meus dados estão seguros?
Toda a geração e a visualização das animações acontecem inteiramente no seu navegador. Nenhum dado é enviado a servidores, então as configurações das suas animações e o código CSS permanecem totalmente privados.
Quais navegadores aceitam animações CSS?
As animações CSS têm suporte em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera. O código gerado usa a sintaxe padrão de @keyframes, que funciona em todas as versões atuais dos navegadores.
Posso combinar várias animações em um mesmo elemento?
Sim, você pode aplicar várias animações a um único elemento separando os nomes das animações por vírgulas no CSS. Gere cada animação separadamente e combine-as na sua folha de estilos.
O que é uma função de temporização cubic-bezier?
Uma função cubic-bezier define uma curva de aceleração personalizada para a sua animação. Ela usa quatro valores para controlar como a animação acelera e desacelera, oferecendo um controle preciso além das opções padrão, como ease-in ou ease-out.
Dicas e boas práticas
- Use transform e opacity: anime as propriedades transform e opacity para obter o melhor desempenho, pois elas podem ser aceleradas por hardware pela GPU.
- Mantenha as animações sutis: animações sutis (0,2s-0,5s) parecem mais refinadas do que as longas e dramáticas na maioria das interações de interface.
- Respeite as preferências do usuário: use a media query prefers-reduced-motion para desativar ou reduzir as animações para usuários que preferem menos movimento.
- Escolha modos de preenchimento adequados: use "forwards" para manter o estado final, "backwards" para aplicar o primeiro keyframe durante o atraso ou "both" para ter controle total.
- Teste em vários dispositivos: visualize suas animações em dispositivos móveis, onde o desempenho pode ser diferente dos navegadores de desktop.