Editor de curvas Bézier
Arraste os pontos de controle, digite valores exatos e reproduza a transição antes de copiar a declaração cubic-bezier() gerada.
Funciona localmente no seu navegador · cubic-bezier() · CSS timing
Arraste os pontos de controle, digite valores exatos e reproduza a transição antes de copiar a declaração cubic-bezier() gerada.
Funciona localmente no seu navegadorO editor transforma quatro pontos de controle (x1, y1, x2, y2) em uma função cubic-bezier(), desenha a curva de aceleração resultante e reproduz uma transição CSS real com ela. A curva, o código e a prévia são montados dentro da página: a função é composta localmente e nenhum valor é enviado.
x1 e x2 ficam entre 0 e 1, como exige a gramática do CSS, enquanto y1 e y2 aceitam de −2 a 2, o que permite curvas com ultrapassagem. A tela desenha a janela usual de −0,5 a 1,5 e se amplia quando um ponto de controle a ultrapassa, para que nenhum ponto saia do desenho.
O bloco é uma única regra — .animated-element { transition: transform <duração>ms cubic-bezier(x1, y1, x2, y2); } —, então o seletor e a propriedade animada são exemplos que você troca pelos seus; a função de temporização é a parte que este editor produz. Os quatro números são arredondados para duas casas, exatamente como aparecem no painel de código.
O painel de código, a aceleração aplicada ao ponto de reprodução e o desenho da curva leem os mesmos quatro campos, então a prévia não pode divergir da declaração que você copia.
O eixo x vai de 0 a 1 e o eixo y mostra a janela de temporização; as linhas verticais marcam quartos de x e as horizontais cada 0,5 de y dentro da faixa visível. Os dois pontos de controle são desenhados nas suas coordenadas e a curva é a cúbica que passa por (0,0), pelos dois controles e por (1,1).
A janela visível de y é −0,5 a 1,5 por padrão. Se um ponto de controle sair dela — o predefinido overshoot deixa y1 em 1.56 e os campos aceitam até 2 —, a janela se estende o suficiente para manter o ponto e o trecho da curva dentro da tela, sem cortá-los.
Valores de x são limitados a 0–1, os de y a −2–2 e a duração a 100–5000 ms, com arredondamento para duas casas. A lista de predefinidos passa para uma entrada Personalizado assim que um valor é editado à mão ou arrastado, para que o menu nunca mostre uma curva que os campos não contêm mais.
Nada é enviado: depois de a página carregar, escolher predefinidos, arrastar, digitar, reproduzir, copiar e redefinir não gerou nenhuma requisição de rede nos testes em en, fr e ja. A prévia usa a implementação de transições CSS do próprio navegador, por isso a página continua funcionando offline.