1. O Que E uma Curva Cubic-Bezier
Uma curva cubic-bezier e uma curva parametrica de terceiro grau definida por quatro pontos: dois pontos fixos (P0 e P3) e dois pontos de controle (P1 e P2). Em CSS, ela e usada como funcao de temporalizacao (timing function) para controlar a aceleracao e desaceleracao de animacoes e transicoes.
A funcao cubic-bezier(x1, y1, x2, y2) recebe as coordenadas dos pontos de controle P1 e P2. Os eixos representam: X = progresso do tempo (0 a 1) e Y = progresso da animacao (valores fora de 0-1 criam overshoot).
2. Os Quatro Pontos de Controle
Entender o papel de cada ponto e fundamental para criar curvas intencionais:
- P0 (0,0): ponto de inicio fixo. Representa o estado inicial da animacao no tempo zero.
- P1 (x1, y1): primeiro ponto de controle. Define a inclinacao inicial da curva. x1 deve estar entre 0 e 1; y1 pode ser qualquer valor.
- P2 (x2, y2): segundo ponto de controle. Define a inclinacao final da curva antes de chegar ao destino. x2 deve estar entre 0 e 1; y2 pode ser qualquer valor.
- P3 (1,1): ponto final fixo. Representa o estado final da animacao ao final do tempo.
Quando y1 ou y2 ultrapassam os limites 0-1, a animacao "ultrapassa" o estado final antes de se estabilizar — criando efeitos de bounce e spring.
3. Presets Nativos do CSS
O CSS define cinco valores de easing padrao, todos implementados internamente como cubic-bezier:
- linear: cubic-bezier(0, 0, 1, 1) — velocidade constante, sem aceleracao.
- ease: cubic-bezier(0.25, 0.1, 0.25, 1) — inicio lento, aceleracao e desaceleracao suaves.
- ease-in: cubic-bezier(0.42, 0, 1, 1) — inicio lento, termina rapido.
- ease-out: cubic-bezier(0, 0, 0.58, 1) — inicio rapido, termina lento.
- ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) — inicio e fim lentos, meio rapido.
"O preset 'ease' e o mais natural para a maioria dos casos — imita a fisica real de objetos que aceleram do repouso e desaceleram antes de parar."
4. Quando Usar Curvas Customizadas
Curvas customizadas sao recomendadas quando os presets nativos nao transmitem a sensacao certa:
- Animacoes de UI: modais, drawers e tooltips se beneficiam de spring suave para parecer mais naturais.
- Microinteracoes: botoes que "pulsam" ao ser clicados usam bounce controlado.
- Jogos e demos: fisicas de queda, elasticidade e ricochete sao modeladas com curvas personalizadas.
- Design systems: manter curvas consistentes em todos os componentes cria coerencia de movimento.
5. Performance de Animacoes CSS
Independente da curva escolhida, para animacoes suaves e performaticas no browser, prefira animar apenas propriedades que o compositor pode tratar: transform e opacity. Animar width, height ou top/left causa reflow e prejudica a performance.
Use will-change: transform com moderacao para promover elementos ao compositor antes de animacoes pesadas.
6. Perguntas Frequentes
Por que x1 e x2 sao limitados a 0-1 mas y1 e y2 nao?
O eixo X representa o progresso do tempo, que nao pode "voltar" (por isso 0 a 1). O eixo Y representa o progresso da animacao, que pode temporariamente ultrapassar o estado final (overshoot) — o que cria efeitos de bounce e spring.
O codigo gerado funciona em todos os browsers?
Sim. A funcao cubic-bezier e suportada em todos os browsers modernos sem prefixo. Para suporte a IE11 e versoes antigas, pode ser necessario usar ease como fallback.
Qual a diferenca entre transition-timing-function e animation-timing-function?
Ambas aceitam cubic-bezier. A primeira se aplica a transicoes CSS (hover, focus, etc.); a segunda se aplica a animacoes @keyframes. A ferramenta gera ambas as propriedades para facilitar o uso.