Pontos-chave
- 01Arraste os dois pontos de controle para esculpir a curva de easing visualmente em vez de adivinhar valores numéricos.
- 02Uma animação de bola em tempo real reproduz o timing para que você sinta o movimento antes de se comprometer com ele.
- 03Todos os cinco presets CSS integrados (ease, linear, ease-in, ease-out, ease-in-out) estão disponíveis como pontos de partida.
- 04O valor cubic-bezier() é atualizado em tempo real com precisão de duas casas decimais, pronto para colar em qualquer propriedade CSS.
Por Que Curvas de Easing Personalizadas Importam para Movimento de UI
As funções de timing integradas do CSS — ease, ease-in-out, linear — cobrem muito terreno, mas toda UI tem momentos em que o padrão parece ligeiramente errado. Um tooltip que aparece muito rapidamente, um modal que ultrapassa ao abrir, uma barra de progresso que parece mecânica. Curvas cubic-bezier permitem ajustar o movimento para parecer natural em vez de mecânico, mas os quatro números em cubic-bezier(0.4, 0, 0.2, 1) são quase impossíveis de entender diretamente.
O editor cubic-bezier do Handytool transforma esses números em uma curva visual com dois pontos de controle arrastáveis. Mova um ponto e a animação da bola é reproduzida imediatamente, para que você possa iterar por sensação até que o movimento corresponda à sua intenção. Depois copie o valor e coloque-o no seu CSS — pronto.
Como Projetar uma Curva de Easing CSS
- 01
Comece com um preset
Selecione ease, linear, ease-in, ease-out ou ease-in-out como linha de base. Os pontos se encaixam nas posições corretas para cada preset.
- 02
Arraste os pontos de controle
Cada ponto controla uma extremidade da curva — o ponto inicial molda a aceleração inicial, o ponto final molda a desaceleração final. Mover um ponto muda automaticamente o preset para 'personalizado'.
- 03
Observe a animação da bola
Uma bola anima da esquerda para a direita usando sua curva. Ajuste o controle deslizante de duração para visualizar transições lentas versus rápidas.
- 04
Experimente com overshoot
Arraste um ponto do eixo Y acima de 1 ou abaixo de 0 para criar overshoot e undershoot — o efeito 'saltitante' que faz um menu abrir energicamente.
- 05
Copie o valor CSS
Clique em Copiar para pegar a string cubic-bezier() e colá-la em transition-timing-function ou animation-timing-function na sua folha de estilos.
Funciona Inteiramente no Seu Navegador
O editor é uma ferramenta autossuficiente do navegador — nenhuma fonte, nenhum script e nenhum dado são carregados após a página abrir. Arrastar pontos e visualizar animações funciona offline. A fórmula cubic-bezier usada para a visualização da bola é a mesma que os navegadores usam para transições CSS, portanto o que você vê no editor é exatamente o que sua folha de estilos produzirá.
Não há nada para instalar e nada para se inscrever. A saída é um único valor CSS — cole e pronto.
Perguntas Frequentes do Editor Cubic-Bezier
O que é uma curva de easing cubic-bezier?
É uma curva matemática definida por dois pontos de controle que determina como uma transição ou animação CSS acelera ao longo do tempo. Os quatro números em cubic-bezier(x1, y1, x2, y2) definem as posições desses pontos de controle.
Por que os valores Y podem ir acima de 1 ou abaixo de 0?
Valores Y fora de 0–1 produzem overshoot e undershoot — a curva passa seu ponto final antes de se estabilizar. Isso cria curvas de easing 'saltitantes'. Os valores X devem permanecer em 0–1.
Como uso a saída?
Copie a string cubic-bezier(...) e cole-a em qualquer valor transition-timing-function ou animation-timing-function CSS. Funciona em todos os navegadores modernos.
O que ease-in-out realmente significa?
Ease-in-out começa lentamente, acelera no meio e desacelera no final — cubic-bezier(0.42, 0, 0.58, 1). Espelha como objetos reais aceleram e desaceleram e é a escolha padrão para a maioria do movimento de UI polido.
A visualização da animação da bola é precisa em relação ao CSS?
Sim — a visualização usa a mesma fórmula cubic bezier que os navegadores aplicam a transições CSS. O controle deslizante de duração permite que você sinta curvas lentas versus rápidas antes de se comprometer.