Gerador de Keyframes CSS
Gere animações CSS com keyframes a partir de presets e prévia em tempo real, com código pronto para copiar. Grátis, no navegador.
Preparing private browser tool…
Perguntas frequentes
- O que são @keyframes no CSS?
- São a definição das etapas de uma animação por meio de estilos aplicados em porcentagens (de 0% a 100%) ou com from/to.
- Como fazer a animação repetir para sempre?
- Defina animation-iteration-count: infinite. Para o efeito de vaivém, use animation-direction: alternate.
- Por que a animação volta ao estado inicial no fim?
- Use animation-fill-mode: forwards para manter aplicados os estilos do último keyframe.
- Quais animações prontas estão incluídas?
- Oito: fade-in, slide-up, bounce, rotate, pulse, shake, zoom-in e flip. Cada uma é gerada como um bloco @keyframes nomeado, que você pode renomear depois de copiar.
- O que dá para ajustar?
- Duração de 0.1 a 5 segundos, atraso de até 3 segundos, contagem de repetições de 1, 2, 3, 5 ou infinite, cinco funções de temporização mais um cubic-bezier com overshoot, direção e fill mode. O botão de repetir reinicia a prévia sem recarregar a página.