Gerador de cubic-bezier CSS

O que é Gerador de cubic-bezier CSS?

O gerador de cubic-bezier CSS é um editor visual gratuito das funções de aceleração usadas por transições e animações do CSS, feito para desenvolvedores front-end e designers de movimento. No modo cubic-bezier, você arrasta dois pontos de controle (ou os digita) para modelar uma curva: os valores x ficam na faixa legal de 0 a 1, enquanto os valores y podem passar de 1 ou ficar abaixo de 0 para criar overshoot e antecipação. Um modo steps() cobre a temporização em etapas com um número de passos ajustável e um termo de salto — jump-start, jump-end, jump-none ou jump-both, onde step-start e step-end são steps(1, …). Uma prévia animada ao vivo reproduz a aceleração atual em uma caixa que se move e escala pela duração que você definir, você pode sobrepor qualquer predefinição como curva fantasma para comparar e importar uma string cubic-bezier() ou steps() existente. Copie a declaração exata para a sua transition-timing-function ou animation-timing-function.

Como usar Gerador de cubic-bezier CSS

1. Escolha o modo cubic-bezier() ou steps() no topo, ou abra as Configurações para começar de uma predefinição como ease, ease-in-out ou linear.
2. No modo cubic-bezier, arraste as duas alças do gráfico ou digite valores exatos de x1, y1, x2 e y2; empurre y acima de 1 para overshoot.
3. No modo steps(), defina o número de passos e escolha um termo de salto (jump-start, jump-end, jump-none ou jump-both) para desenhar a escada.
4. Pressione Reproduzir para rodar a animação ao vivo na caixa que se move e escala, e ajuste a duração em segundos para sentir o ritmo.
5. Escolha uma curva de comparação nas Configurações para sobrepor uma predefinição como fantasma no mesmo gráfico, ou cole um valor em Importar e aplique-o.
6. Copie o valor cubic-bezier() ou steps() gerado para a sua transition-timing-function ou animation-timing-function.

Exemplos

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

modo steps, N 4, jump-end

steps(4, jump-end)

Perguntas frequentes

O que significam os quatro números do cubic-bezier?

São as coordenadas dos dois pontos de controle: x1, y1 para o primeiro ponto e x2, y2 para o segundo. A curva sempre começa em (0,0) e termina em (1,1); os pontos de controle a curvam no meio, o que controla como a propriedade animada acelera e desacelera ao longo do tempo.

Para que serve o modo steps()?

steps() salta entre um número fixo de valores em vez de interpolar suavemente — útil para animações de sprites, contadores em saltos ou efeitos quadro a quadro. Defina o número de passos e um termo de salto: jump-start, jump-end, jump-none ou jump-both. step-start equivale a steps(1, jump-start) e step-end a steps(1, jump-end).

Como funciona a prévia com animação ao vivo?

Pressione Reproduzir e a caixa se move pela pista e escala usando a sua aceleração atual, indo e voltando. Mude a duração em segundos para desacelerá-la ou acelerá-la; ela usa animação CSS pura com o seu valor cubic-bezier() ou steps() como função de temporização.

Posso importar um valor de aceleração existente?

Sim. Cole um valor cubic-bezier(...) ou steps(...) — ou uma palavra-chave como ease-in-out, step-start ou step-end — no campo Importar e aplique-o; o editor o analisa de volta para os pontos de controle ou as configurações de passos.

Meus dados são enviados a um servidor?

Não. Todo o editor roda no seu navegador com JavaScript — os pontos de controle e a curva são calculados localmente e nunca enviados, então funciona de forma privada e até offline depois que a página carrega.