Categoria: Desenvolvimento
Gerador de Cubic Bezier
Desenhe uma curva de suavização CSS personalizada
Arraste dois pontos de controle para moldar uma função de tempo cubic-bezier(), veja a curva e uma pré-visualização em movimento serem atualizadas ao vivo, e copie a declaração final de animation-timing-function. A curva é calculada no seu navegador.
Progresso em 50% da duração: 0.802
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
A suavização de uma transição ou animação CSS é uma curva cúbica de bézier de (0,0) a (1,1): os dois pontos intermediários decidem se o movimento começa devagar e termina rápido, ultrapassa o alvo, ou algo totalmente diferente. As palavras-chave nomeadas (ease, ease-in-out e assim por diante) são apenas cinco pontos fixos nesse espaço. Esta ferramenta plota a curva a partir dos dois pontos de controle que você define, mostra uma caixa se movendo com essa função de tempo exata, e informa o quanto o progresso suavizado avançou na metade do tempo — o número mais difícil de imaginar apenas olhando a curva.
Como usar
- Comece a partir de uma predefinição ou defina os dois pontos de controle diretamente.
- Observe a curva e a pré-visualização em movimento sendo atualizadas.
- Copie a declaração cubic-bezier() para a sua transição ou animação.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Algo é calculado em um servidor?
- Não. A curva, a pré-visualização em movimento e o valor de progresso são todos calculados por JavaScript executado na página.
- Por que os dois valores de X são limitados entre 0 e 1?
- X representa o tempo decorrido, que a especificação CSS exige que avance sempre para frente, de 0 a 1, para que a curva permaneça uma função válida do tempo. Y é o progresso suavizado e pode ficar abaixo de 0 ou acima de 1, o que é como se constrói uma ultrapassagem ou um efeito de quique.
- O que significa o valor da metade do tempo?
- É o progresso suavizado — não o progresso linear — no momento em que exatamente metade da duração da animação transcorreu. Um valor acima de 50% ali significa que o movimento já está à frente de um ritmo linear na metade do caminho.