design
Gratuito
Sem cadastro
Gerador de QR Code
Crie animações CSS @keyframes visualmente com prévia ao vivo, controles de tempo e editor de easing cubic-bezier.
Carregando ferramenta…
Sobre esta ferramenta
Projete animações CSS sem escrever uma única linha de código. Escolha entre os tipos de animação Fade, Slide, Bounce, Rotate, Scale, Shake, Flip, Pulse, Swing ou Custom, depois ajuste com precisão a duração, atraso, contagem de iterações, direção e fill-mode. Escolha uma função de easing — incluindo uma curva cubic-bezier editável por arrastar — e veja o elemento animado atualizar em tempo real. O bloco @keyframes gerado e a abreviação de animação estão prontos para copiar diretamente na sua folha de estilos.
Como usar
- 1 Selecione um tipo de animação no menu suspenso (por exemplo, Bounce, Fade, Rotate).
- 2 Ajuste as configurações de tempo: duração, atraso, contagem de iterações, direção e fill-mode.
- 3 Escolha uma função de easing ou arraste as alças cubic-bezier para criar uma curva personalizada.
- 4 Copie o CSS gerado do painel de código e cole-o na sua folha de estilos.
Perguntas frequentes
Ferramentas relacionadas