Gerador de cubic-bezier CSS

O que é Gerador de cubic-bezier CSS?

O gerador de cubic-bezier CSS é um editor visual gratuito da função de temporização cubic-bezier() usada por transições e animações do CSS, feito para desenvolvedores front-end e designers de movimento. Escolha uma predefinição como ease, linear, ease-in, ease-out ou ease-in-out, ou ajuste você mesmo os dois pontos de controle: os valores x são limitados à 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. A prévia desenha a curva em um quadrado unitário para você ler a aceleração e a desaceleração num relance, e a declaração exata cubic-bezier(x1, y1, x2, y2) é produzida para você copiar. Use-o sempre que uma palavra-chave embutida parecer genérica demais e você quiser um movimento mais ágil, mais elástico ou mais comedido.

Como usar Gerador de cubic-bezier CSS

1. Abra as Configurações e escolha uma predefinição inicial — ease, linear, ease-in, ease-out ou ease-in-out — para definir os pontos de controle.
2. Arraste as duas alças redondas na prévia da curva para remodelar a aceleração, ou digite valores exatos nos campos x1, y1, x2 e y2.
3. Mantenha x1 e x2 entre 0 e 1; empurre y1 ou y2 acima de 1 ou abaixo de 0 para adicionar overshoot ou antecipação ao movimento.
4. Leia a curva em relação à linha base linear tracejada para avaliar como a aceleração acelera e desacelera.
5. Copie o valor cubic-bezier() gerado e cole na 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, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

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

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.

Por que não consigo definir x1 ou x2 acima de 1?

A especificação do CSS exige que as coordenadas x (tempo) de ambos os pontos de controle fiquem entre 0 e 1, para que a função de temporização continue sendo um mapeamento válido de progresso para saída. Esta ferramenta limita os campos x e as alças de arraste a essa faixa automaticamente. Os valores y, porém, podem ultrapassar 1 ou ficar abaixo de 0 para criar overshoot ou antecipação.

Como faço uma aceleração saltitante ou elástica?

Empurre um dos valores y acima de 1 (para overshoot no fim) ou abaixo de 0 (para antecipação no início). Por exemplo, cubic-bezier(0.34, 1.56, 0.64, 1) passa do ponto antes de assentar, dando uma sensação de mola sem nenhum JavaScript.

Onde uso o valor gerado?

Cole-o como valor de transition-timing-function ou animation-timing-function — por exemplo transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ele substitui palavras-chave como ease ou ease-in-out pela sua curva personalizada.

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.