Spring sutil (Y1=1.2)
- Entrada
- Escala ou translate de elemento entrando
- Saída esperada
- transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1);
Overshoot suave. Funciona bem para ícones, badges e toasts.
cubic-bezier spring overshoot CSS animação elástica
Spring e overshoot com cubic-bezier CSS: efeito mola sem JavaScript
Uma das capacidades menos conhecidas do `cubic-bezier()` no CSS é que os pontos de controle Y não são restritos ao intervalo [0,1]. Quando Y ultrapassa 1 ou vai abaixo de 0, a animação ultrapassa o ponto final e retorna — criando o efeito de mola (spring/bounce) sem nenhuma linha de JavaScript.
Como o overshoot funciona matematicamente
- A curva bezier mapeia t (0→1) para ambos X (tempo) e Y (progresso). X deve ficar em [0,1] porque o tempo só avança. Y pode sair desse range — o browser anima além do valor final e depois volta. `cubic-bezier(0.34, 1.56, 0.64, 1)` é uma das fórmulas mais usadas para spring suave: Y1=1.56 cria o overshoot.
- O grau de overshoot é controlado pelo quão alto Y1 ultrapassa 1. Y1=1.2 cria um toque sutil. Y1=2.0 cria um bounce exagerado. Para efeitos de bounce duplo (tipo jello), CSS puro com cubic-bezier não é suficiente — precisa de @keyframes com múltiplos frames intermediários.
Valores de spring por intensidade
Spring médio (Y1=1.56)
- Entrada
- Modal ou drawer entrando
- Saída esperada
- transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
Fórmula popular para drawers e menus. Personalidade sem exagero.
FAQ da ferramenta completa
É uma função matemática que define como uma animação CSS acelera e desacelera ao longo do tempo. Os quatro parâmetros (x1, y1, x2, y2) descrevem os pontos de controle de uma curva cúbica.
Perguntas frequentes
Quais propriedades funcionam bem com spring overshoot?
Transform (scale, translate) e opacity funcionam melhor porque são composited pelo GPU. Evite spring em propriedades de layout como width, height, padding — geram reflow e o efeito fica irregular.
CSS spring é igual a framer-motion spring?
Não. Framer-motion usa física de mola real (massa, rigidez, amortecimento) calculada frame a frame. CSS cubic-bezier é uma aproximação conveniente. Para efeitos sofisticados com múltiplos bounces ou que dependem de velocidade, JavaScript é necessário.