CSS cubic-bezier()

CSS cubic-bezier(): a função de easing que controla toda animação

A função cubic-bezier() define como uma animação ou transição CSS evolui no tempo. Use como easing em qualquer propriedade animável: transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) ou em animation-timing-function. Os quatro números definem os dois pontos de controle de uma curva Bézier cúbica traçada de (0,0) até (1,1) — o eixo X é tempo, o eixo Y é progresso.

Sintaxe e os quatro parâmetros

cubic-bezier(P1x, P1y, P2x, P2y):

• X deve ficar entre 0 e 1. Valor fora desse intervalo é inválido.
• Y pode passar de 0-1 — Y > 1 cria overshoot (bounce), Y < 0 cria antecipação (back-easing).
• Os pontos extremos são implícitos: P0 = (0,0) e P3 = (1,1) — começo e fim ficam fixos.

Keywords nativos e o que cada um significa

linear        →  cubic-bezier(0,    0,    1,    1)
ease  (padrão) →  cubic-bezier(0.25, 0.1,  0.25, 1)
ease-in       →  cubic-bezier(0.42, 0,    1,    1)
ease-out      →  cubic-bezier(0,    0,    0.58, 1)
ease-in-out   →  cubic-bezier(0.42, 0,    0.58, 1)

O standard easing do Material Design é cubic-bezier(0.4, 0, 0.2, 1); decelerate é cubic-bezier(0, 0, 0.2, 1); accelerate é cubic-bezier(0.4, 0, 1, 1). O catálogo do easings.net traduz os clássicos Robert Penner easings (Quad, Cubic, Quint, Expo, Back, Elastic, Bounce) para valores CSS prontos para colar.

Overshoot, antecipação e bounce

Definir P2y > 1 — por exemplo cubic-bezier(0.34, 1.56, 0.64, 1) — faz a curva passar de 100% antes de assentar, produzindo o clássico "back easeOut" que designers usam em botões e modais. Definir P1y < 0 cria antecipação, no qual o elemento recua antes de avançar. Spring physics puras não existem em CSS — para isso use libs como Framer Motion ou a nova função linear() (Chrome 113+, Firefox 112+) que aceita uma lista de pseudo-keyframes: linear(0, 0.5 25%, 1).

Recomendações práticas

• ease-out para elementos de UI entrando — desaceleram suavemente até parar.
• ease-in para elementos saindo — aceleram para fora da tela.
• ease-in-out para transições dentro da página que precisam de simetria.
• Evite linear em UI — soa mecânico (cabe em barras de progresso, marquees e spinners em loop).
• Use steps(N, end) quando quiser animação stepped tipo sprite, sem interpolação suave.

O editor visual clássico é o cubic-bezier.com da Lea Verou — arraste os pontos de controle e veja a curva animar ao vivo.

Perguntas frequentes

Dá para fazer bounce de verdade com cubic-bezier? Parcialmente — coloque Y > 1 para um overshoot. Springs com várias batidas precisam da função CSS moderna linear() com vários pseudo-keyframes, ou de libs JS como Framer Motion / GSAP que dirigem o frame por frame.

Qual a diferença entre cubic-bezier e steps()? cubic-bezier faz interpolação suave entre início e fim. steps(N, end) avança em N frames discretos — ideal para sprite sheets, efeitos máquina-de-escrever e visual stop-motion.

Quando usar ease-out vs ease-in? Use ease-out para elementos chegando (toasts, dropdowns) — entram rápido e param suave. Use ease-in para elementos saindo da viewport — começam devagar e somem rápido.

A Web Animations API JS aceita cubic-bezier? Sim — passe na opção easing de element.animate(keyframes, { duration, easing: 'cubic-bezier(0.4,0,0.2,1)' }). Mesma sintaxe, mesmo comportamento do CSS.