Gerador de curva CSS cubic-bezier com pré-visualização
Gere uma curva de easing CSS cubic-bezier com pré-visualização, no seu navegador.
🔒 100 % no cliente — nenhum dado enviado
Esta ferramenta cria curvas cubic-bezier para easing de animações CSS, com uma pré-visualização visual do movimento. Arraste os pontos de controle e copie o valor pronto para colar na sua folha de estilos. Tudo roda 100% no seu navegador, sem dependência externa.
What is it for?
- ▸ Criar um easing personalizado para uma transição CSS suave
- ▸ Reproduzir uma curva de aceleração ease-in-out sob medida
- ▸ Pré-visualizar o movimento de uma animação antes de integrá-la
- ▸ Copiar um valor cubic-bezier pronto para uma propriedade transition
FAQ
O que é uma função cubic-bezier em CSS?
É uma função de easing definida por quatro valores que controlam como uma animação ou transição acelera e desacelera ao longo do tempo.
Como uso um valor cubic-bezier no meu CSS?
Copie o valor gerado e coloque-o em uma propriedade transition-timing-function ou animation-timing-function, por exemplo cubic-bezier(0.25, 0.1, 0.25, 1).
Posso criar um efeito bounce com cubic-bezier?
Sim, ao posicionar pontos de controle além do intervalo 0-1 no eixo vertical, a curva ultrapassa o alvo e produz um efeito bounce.