Editor de Suavização Cubic-Bézier
Desenhe curvas de suavização cubic-bezier personalizadas com um editor arrastável e pré-visualização de animação em direto.
Arraste as duas alças para moldar a curva de suavização.
transition-timing-function: —;
animation-timing-function: —;
Tudo é executado no seu navegador — nada é enviado.
Sobre Editor de Suavização Cubic-Bézier
O Editor de Suavização Cubic-Bézier projeta funções de temporização personalizadas para transições e animações CSS. Arraste as duas alças de controle na tela da curva e o valor cubic-bezier(x1, y1, x2, y2) é atualizado em tempo real; uma pré-visualização de animação reproduz a suavização ao lado de uma referência linear para você sentir a diferença, com duração ajustável e repetição instantânea.
Dez predefinições cobrem o vocabulário comum — a suavização padrão, ease-in, ease-out e ease-in-out, além de curvas expressivas como back e anticipate, que ultrapassam seus pontos finais, e as rampas de aceleração e desaceleração no estilo material. Use-as como estão ou como pontos de partida para arrastar até algo próprio.
Você também pode digitar coordenadas exatas dos pontos de controle, clicar em aleatorizar para se inspirar, e copiar o valor cubic-bezier() simples ou uma regra CSS pronta para colar. Todo o editor funciona no seu navegador.
Como usar Editor de Suavização Cubic-Bézier
- Arraste as duas alças no editor de curva para moldar a suavização.
- Clique em Repetir e compare a animação suavizada com a referência linear, ajustando a duração se necessário.
- Experimente as predefinições — ease, back, anticipate, material e mais — para um ponto de partida rápido.
- Ajuste com precisão usando os campos numéricos de ponto de controle para valores exatos.
- Copie o valor cubic-bezier() ou o trecho CSS completo.