← Todas as ferramentas de texto

Gerador de cubic bezier

Arraste uma curva para criar uma suavização CSS, veja a animação e copie a função de temporização.

  • Grátis
  • Sem cadastro
  • Funciona em qualquer dispositivo

Cerca de Gerador de cubic bezier

Arraste as duas alças de controle de uma curva de Bézier para criar uma suavização personalizada para transições e animações CSS, veja uma bola animada com ela e copie o valor cubic-bezier(x1, y1, x2, y2). Os valores x devem ficar entre 0 e 1, enquanto y pode ultrapassar para um efeito de rebote.

Como usar: Gerador de cubic bezier

  1. Arraste as duas alças da curva para dar forma à suavização.
  2. Pressione play para ver um elemento se mover com a sua temporização.
  3. Copie a função cubic-bezier para a sua transição ou animação.

Por que usar esta ferramenta?

Também conhecido como

Perguntas frequentes

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

São as coordenadas x e y de dois pontos de controle da curva de velocidade. Trechos mais íngremes significam movimento mais rápido, trechos mais planos significam movimento mais lento.

A curva pode sair da caixa?

Os valores verticais podem passar de 0 e 1, o que cria um overshoot ou salto. Os valores horizontais devem ficar entre 0 e 1.

Qual curva parece natural para movimentos de interface?

Uma curva de estilo ease-out, rápida no início e lenta no fim, parece responsiva para elementos que entram na tela. Teste primeiro durações curtas.

Gerador de cubic bezier é grátis?

Sim. Gerador de cubic bezier no Toolipedia é de uso gratuito, sem cadastro e sem marca d'água.

É seguro usar?

Sim. Tudo é calculado no seu navegador, e nada do que você digita é enviado ao nosso servidor.

Funciona no meu celular?

Sim. Funciona em qualquer navegador moderno no Android e no iPhone, além de tablets e computadores. Não é preciso instalar nada.

Preciso de uma conta?

Não. É só abrir a página e usar a ferramenta. Sem cadastro e sem e-mail.

Posso colocar Gerador de cubic bezier no meu próprio site?

Sim. Use o botão «Incorporar no seu site» abaixo da ferramenta para copiar um trecho curto de código e colá-lo na sua página. É grátis, não precisa de conta e a ferramenta continua funcionando dentro da sua página.

Ferramentas relacionadas