cubic-bezier transições interface CSS
A função `cubic-bezier()` é o mecanismo que define como uma propriedade CSS muda ao longo do tempo. A escolha do easing é o que separa animações que parecem "de software antigo" das que parecem naturais e responsivas. O `ease-out` (começa rápido, desacelera) é o mais recomendado para elementos que entram na tela, porque objetos reais desaceleram ao parar.
Resposta imediata que desacelera suavemente perto do fim. Boa combinação para elementos que surgem na tela.
Curva quase simétrica e rápida. Usada em micro-interações onde o feedback precisa ser instantâneo.
Transição simétrica de estado. Ideal para abrir e fechar conteúdo sem favorecer entrada ou saída.
É 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 dois pontos de controle de uma curva cúbica de Bézier, enquanto o início (0,0) e o fim (1,1) são fixos. O formato da curva entre esses pontos é o que dá personalidade ao movimento.
`cubic-bezier(0.2, 0, 0, 1)`. É uma curva de desaceleração rápida no início e suave no fim, próxima da curva padrão usada em componentes do Material Design 3. Repare que os dois pontos de controle Y ficam em 0 e 1, sem overshoot, diferente das curvas de spring.
Não necessariamente. Molas reais exigem JavaScript (framer-motion, react-spring) porque o overshoot físico é difícil de representar em cubic-bezier puro. Mas uma aproximação convincente é possível com valores de Y além de 1.
Tecnicamente sim, mas o resultado costuma parecer menos natural. Como X e Y estão amarrados aos mesmos quatro pontos, uma curva otimizada para desacelerar na entrada (`ease-out`) acelera de forma estranha quando usada ao contrário na saída. O padrão recomendado é trocar para `ease-in` (ou espelhar os pontos) nas transições de saída.
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);O CSS é gerado localmente no navegador.