Ferramentas CSS/Construtor de Animações CSS
Construtor de Animações CSS
Crie animações CSS de keyframes impressionantes com editor de linha do tempo interativo
Visualização
Box
Configurações
1s
0s
Presets
Linha do Tempo
Keyframe em 0%
Keyframe em 50%
Keyframe em 100%
Código CSS
Loading...CSS Animation Guide
Learn how to create engaging CSS animations
What is CSS Animation?
CSS animations allow you to animate transitions between CSS styles. Unlike transitions, animations can have multiple keyframes that define intermediate steps, giving you complete control over the animation sequence. Animations can run automatically, loop infinitely, and be controlled with JavaScript.
How to Use This Tool
- Configure animation settings like duration, timing, and iteration
- Add keyframes to define animation states at different points
- Adjust properties like opacity, scale, rotation at each keyframe
- Preview the animation and copy the generated CSS code
Pro Tips
- Use the 'alternate' direction for smooth back-and-forth animations
- Combine transforms (scale, rotate, translate) for complex effects
- Use 'forwards' fill mode to keep the final state after animation ends
Browser Support
CSS animations are fully supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The @keyframes rule and animation properties have excellent cross-browser compatibility.
Perguntas frequentes
Qual a diferenca entre animacoes CSS e transicoes?
Transicoes animam mudancas entre dois estados e precisam de um gatilho como hover. Animacoes usam @keyframes para definir multiplas etapas, podem iniciar automaticamente, repetir infinitamente e criar movimentos mais complexos. Use transicoes para mudancas simples de estado, animacoes para sequencias complexas.
Como fazer uma animacao repetir infinitamente?
Use animation-iteration-count: infinite para repetir a animacao indefinidamente. Na propriedade abreviada: 'animation: myAnimation 2s infinite;'. Definir direction como alternate cria um efeito suave de vai e vem.
O que e fill-mode e por que e importante?
animation-fill-mode define como os estilos sao aplicados antes e depois da animacao. 'forwards' mantem o estado final apos a animacao, 'backwards' aplica o estado inicial durante o atraso. 'both' aplica ambos os efeitos.
Como otimizar o desempenho de animacoes?
Anime apenas transform e opacity para obter aceleracao de GPU e bom desempenho. width, height, top, left causam reflow e prejudicam o desempenho. A propriedade will-change pode dar dicas ao navegador, mas uso excessivo pode ter efeito contrario.
E possivel controlar animacoes sem JavaScript?
Use animation-play-state: paused para pausar animacoes apenas com CSS. Altere esta propriedade em estados :hover ou :focus para controlar com interacao do usuario. Para controle mais preciso, use a Web Animations API do JavaScript.