O que uma curva cubic-bezier realmente representa?

O eixo X é o tempo, o eixo Y é o progresso. Uma diagonal reta (`cubic-bezier(0, 0, 1, 1)` = `linear`) significa que o progresso é proporcional ao tempo - movimento sem graça. Uma curva em S (o `ease` padrão) significa progresso lento no começo, rápido no meio, lento no fim - o que o olho espera de um objeto físico que acelera e desacelera. As duas alças controlam quão agressiva é essa curva em S.

Y pode passar de 1 ou ficar abaixo de 0?

Y pode - e é assim que se obtém bounce, overshoot e antecipação. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` passa do limite no começo e no fim, produzindo sensação de «elástico». X não - a spec exige que o eixo do tempo fique em 0-1, senão o easing não seria uma função e o browser não conseguiria amostrar. Arraste a alça abaixo de 0 ou acima de 1 em Y para brincar com overshoot.

Qual predefinição para qual tipo de animação?

Use `ease-out` (ou «decelerate» do Material) para elementos que entram na tela - parecem aterrissar suave. Use `ease-in` («accelerate») para os que saem - parecem que foram arrastados embora. Use `ease-in-out` («standard») para elementos que se movem dentro da tela (slides de painel, flips de card). Use `linear` só para animações que repetem (spinner) - é o único easing que faz loop sem solavanco visível.

Por que a curva «standard» do Material soa diferente do `ease` CSS?

CSS `ease` é `cubic-bezier(0.25, 0.1, 0.25, 1)` - uma curva em S gentil. Material standard é `cubic-bezier(0.4, 0, 0.2, 1)` - desaceleração mais agressiva. A curva do Material soa mais «desenhada»: os elementos chegam rápido e param devagar. CSS `ease` foi escolhido no final dos anos 90 e antecede as convenções modernas de motion; a maioria dos design systems sobrescreve.

Posso usar cubic-bezier em bibliotecas JS?

Sim. GSAP, Framer Motion, Anime.js e a Web Animations API aceitam valores cubic-bezier. O nome do prop varia (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), mas os quatro números são universais - copie deste gerador e funcionam em qualquer lugar.

Gerador cubic-bezier

Editor cubic-bezier visual com pré-visualização animada e 12 predefinições de easing padrão.

Predefinições

Arraste os pontos laranja para moldar a curva.

CSS

transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

Pré-visualização

Arraste as duas alças para moldar a curva. A bolinha de pré-visualização toca o easing em loop - você sente o timing, não só a matemática. As predefinições cobrem as quatro palavras-chave CSS (ease, ease-in, ease-out, ease-in-out) e as curvas canônicas do Material Design (standard, decelerate, accelerate, sharp). Os valores são limitados onde os navegadores exigem - X fica em 0-1, Y pode sair (negativo ou >1) para bounce e antecipação.

Como usar

Escolha uma predefinição
Palavras-chave CSS (ease, ease-in, ease-out, ease-in-out) ou curvas Material (standard, decelerate, accelerate, sharp) - um clique carrega os valores.
Arraste as alças
P1 e P2 remodelam a curva. A bolinha animada atualiza ao vivo, você sente o novo timing antes de confirmar.
Olhe a pré-visualização
A bolinha toca o easing em loop. Alterne entre movimento, escala e opacidade para ver como a mesma curva soa em diferentes propriedades.
Copie o valor
A string `cubic-bezier(x1, y1, x2, y2)` está pronta para colar na sua transição CSS, animação ou prop de easing JS.

O que é?

Cubic-bezier é o formato de função de easing usado por transições CSS, animações CSS, a Web Animations API e a maioria das bibliotecas JS de animação. Pega dois pontos de controle (P1 e P2) dentro do quadrado unitário; junto com o ponto inicial implícito (0,0) e o final (1,1), eles definem uma curva que mapeia tempo decorrido para progresso. A forma da curva é o que faz a animação parecer afiada, suave, elástica ou robótica.

Quando usar

Desenhar motion para um design system (qual curva para entrada, saída, movimento no mesmo lugar), combinar com uma linguagem de motion específica (Material, iOS, próprio), criar feedback de clique elástico com curvas de overshoot, suavizar transições CSS no hover/focus, escolher o easing certo para animações de gráfico (linear para eixos, ease-out para barras) e explicar easing a colegas sem entrar na fórmula.

Erros comuns

Usar `linear` para movimento único - parece mecânico porque nenhum objeto real se move com velocidade constante. Escolher um easing diferente para cada transição da UI - motion inconsistente parece sujo; design systems fixam 3-5 curvas e reaproveitam. Esquecer que curvas com overshoot podem cortar quando a propriedade animada tem limites (uma rotação pode passar; um slide que sairia da tela parece quebrado). Animar propriedades lentas com curvas agressivas - um slide de 2 segundos com ease-out duro parece um glitch.

FAQ

O que uma curva cubic-bezier realmente representa?: O eixo X é o tempo, o eixo Y é o progresso. Uma diagonal reta (`cubic-bezier(0, 0, 1, 1)` = `linear`) significa que o progresso é proporcional ao tempo - movimento sem graça. Uma curva em S (o `ease` padrão) significa progresso lento no começo, rápido no meio, lento no fim - o que o olho espera de um objeto físico que acelera e desacelera. As duas alças controlam quão agressiva é essa curva em S.
Y pode passar de 1 ou ficar abaixo de 0?: Y pode - e é assim que se obtém bounce, overshoot e antecipação. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` passa do limite no começo e no fim, produzindo sensação de «elástico». X não - a spec exige que o eixo do tempo fique em 0-1, senão o easing não seria uma função e o browser não conseguiria amostrar. Arraste a alça abaixo de 0 ou acima de 1 em Y para brincar com overshoot.
Qual predefinição para qual tipo de animação?: Use `ease-out` (ou «decelerate» do Material) para elementos que entram na tela - parecem aterrissar suave. Use `ease-in` («accelerate») para os que saem - parecem que foram arrastados embora. Use `ease-in-out` («standard») para elementos que se movem dentro da tela (slides de painel, flips de card). Use `linear` só para animações que repetem (spinner) - é o único easing que faz loop sem solavanco visível.
Por que a curva «standard» do Material soa diferente do `ease` CSS?: CSS `ease` é `cubic-bezier(0.25, 0.1, 0.25, 1)` - uma curva em S gentil. Material standard é `cubic-bezier(0.4, 0, 0.2, 1)` - desaceleração mais agressiva. A curva do Material soa mais «desenhada»: os elementos chegam rápido e param devagar. CSS `ease` foi escolhido no final dos anos 90 e antecede as convenções modernas de motion; a maioria dos design systems sobrescreve.
Posso usar cubic-bezier em bibliotecas JS?: Sim. GSAP, Framer Motion, Anime.js e a Web Animations API aceitam valores cubic-bezier. O nome do prop varia (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), mas os quatro números são universais - copie deste gerador e funcionam em qualquer lugar.