tools.junyo.dev

cubic-bezier transições interface CSS

Cubic-bezier para transições de interface: como criar animações que parecem naturais

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.

Continuar na ferramenta

Abrir ferramenta completa

Mais páginas desta ferramenta

Os fundamentos do easing para UX

  • A física real é `ease-out` — objetos têm inércia e desaceleram ao parar. Para elementos saindo da tela, `ease-in` faz mais sentido (acelera ao partir). `ease-in-out` é para transições de estado onde não há entrada/saída clara (accordions, progress bars). `linear` é para loops e carregamentos onde ritmo constante comunica progresso.
  • Duração e easing são inseparáveis. Um `ease-out` agressivo em 600ms parece pesado. O mesmo easing em 200ms parece ágil. A regra geral: ações de feedback imediato (hover, focus) ficam bem com 100–200ms; entradas de elementos ficam bem com 200–350ms; saídas podem ser ligeiramente mais rápidas (150–250ms).

Presets de easing por contexto de uso

Modal entrando (ease-out suave)

Entrada
Elemento entrando do centro com fade + scale
Saída esperada
transition: opacity 220ms cubic-bezier(0,0,0.2,1), transform 220ms cubic-bezier(0,0,0.2,1);

Material Standard Motion. Resposta rápida com desaceleração suave.

Acordeão (ease-in-out)

Entrada
height ou max-height animado
Saída esperada
transition: max-height 300ms cubic-bezier(0.4,0,0.2,1);

Transição de estado simétrica. Ideal para abertura e fechamento de conteúdo.

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

Qual cubic-bezier o Material Design usa?

MD3 usa três easings principais: Standard `cubic-bezier(0.2,0,0,1)`, Emphasized `cubic-bezier(0.2,0,0,1)` (com diferentes durações), e Decelerated `cubic-bezier(0,0,0,1)` para entradas. O Linear é usado para ondas de progresso.

Spring animations precisam de cubic-bezier?

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.