Como crio uma curva de easing cubic-bezier personalizada para CSS?

Arraste os dois pontos de controlo no gráfico, digite valores exatos x1, y1, x2, y2 ou escolha uma predefinição. Depois escolha CSS em Formato de saída e clique em Copiar para obter o valor cubic-bezier() para transition-timing-function.

Como faço um efeito de ressalto ou overshoot com cubic-bezier?

Arraste um ponto de controlo para cima ou para baixo da caixa para que o seu valor Y ultrapasse 0-1. Y pode exceder esse intervalo, enquanto X permanece entre 0 e 1. As predefinições back-out e anticipate são pontos de partida prontos para overshoot.

Posso obter o easing para Tailwind, Framer Motion ou anime.js?

Sim. As abas de formato de saída são CSS, Tailwind, Framer Motion e anime.js. Todas formatam os mesmos quatro números, por isso escolha uma aba e clique em Copiar para colocar o trecho no clipboard.

Como carrego um valor cubic-bezier existente para o editar?

Cole um valor como cubic-bezier(.17, .67, .83, .67) na caixa de importação e clique em Carregar. Se não for possível ler quatro números, você receberá uma mensagem de erro. A curva também é salva no URL da página após o cardinal, para poder ser compartilhada.

Porque é que a pré-visualização parece mais lenta do que as minhas transições reais?

A Visualização de movimento usa uma definição de Duração que pode alterar, e os padrões são mais lentos para poder estudar a curva. Encurte a Duração e use Repetir para ver o movimento à velocidade que planeia publicar.

Sim. Todas as ferramentas são gratuitas, sem conta e sem cartão de crédito. O processamento acontece no seu dispositivo, e não nos nossos servidores, e é isso que permite manter tudo gratuito.

Sim. Funciona nos navegadores móveis atuais em iOS e Android, sem instalar nada.

📈

Gerador de Easing CSS Cubic-Bezier grátis

Projete curvas de easing CSS arrastando pontos de controle, visualize o movimento ao vivo e copie o valor cubic-bezier(). Inclui predefinições de ultrapassagem e quique.

Executa no seu navegadorSem inscrição, sem pop-upsSem login necessárioGratuito para sempre

Funciona offline depois de carregado

Arraste os handles azul-petróleo e rosa para moldar a curva

Pontos de controle

x1y1x2y2

Visualização de movimento

Duração1,6 s

Transição de largura

Valor CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Predefinições

Os handles rosa e azul-petróleo podem ser puxados acima ou abaixo da caixa (Y além de 0-1) para criar efeitos de 'overshoot' / bounce como back-out e anticipate. X fica dentro de 0-1 (o tempo não pode se inverter).

Usos comuns

Atenuação de Transição CSS PersonalizadaProjete atenuação com sensação natural para efeitos ao passar, menus e transições de UI.
Animações de Salto e SobrecargaCrie movimento de mola/salto divertido puxando pontos de controle além da caixa.
Atenuação para Animações @keyframesEscolha a função de sincronização de animação correta para animações de quadros-chave CSS.
Valores de Atenuação para Bibliotecas de Animação JSObtenha valores cubic-bezier para GSAP, Framer Motion, anime.js e muito mais.
Entender Como Funciona a AtenuaçãoVeja a relação entre uma curva de bezier e o movimento que produz.

Como funciona

O editor é construído inteiramente no navegador usando estado do React e SVG — nenhuma biblioteca trata a matemática da curva. Dois pontos de controlo arrastáveis definem um caminho SVG de Bezier cúbica, e o próprio motor de animação CSS do navegador executa a pré-visualização de movimento injetando o valor cubic-bezier() resultante diretamente numa regra @keyframes.

1
Arraste ou escreva pontos de controlo
Duas alças (P1 em verde-azulado, P2 em rosa) assentam num canvas SVG. O arrastar usa a Pointer Events API com setPointerCapture para que a alça acompanhe o seu dedo ou cursor mesmo fora da fronteira SVG. Você também pode ajustar as alças com as teclas de seta ou digitar valores exatos nas entradas numéricas x1/y1/x2/y2.
2
O SVG desenha a curva em tempo real
A curva é um único elemento SVG <path> cujo comando C (Bezier cúbica) é recalculado a partir das quatro coordenadas de ponto de controlo a cada atualização de estado. Sem canvas, sem biblioteca externa — o renderizador SVG do navegador desenha o caminho diretamente.
3
O motor CSS do navegador pré-visualiza a suavização
Três animações ao vivo (um ponto deslizante, uma transição de largura, e uma escala) executam @keyframes CSS com o valor cubic-bezier() injetado inline. O próprio motor de animação do navegador interpreta a curva, para que o que vê seja exatamente o que o seu CSS de produção vai produzir.
4
Copie o trecho na sintaxe do seu framework
As abas formatam os mesmos quatro números como uma transition-timing-function CSS, uma classe de valor arbitrário Tailwind, um array ease do Framer Motion, ou uma string de suavização anime.js. O trecho é escrito na área de transferência com navigator.clipboard. A curva também é codificada no hash do URL (#b=x1,y1,x2,y2) para você poder compartilhá-la ou marcá-la.