Utilitário

Timing Functions

Curvas de aceleração (cubic-bezier) padronizadas para animações e transições.


← Voltar à lista de classes

O design system não expõe classes utilitárias para timing functions — apenas as variáveis CSS abaixo, que devem ser consumidas diretamente em transition ou animation nos seus componentes.

CSS variables

:root {
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Uso em CSS de componente

.button {
  transition: transform 0.2s var(--ease-out-back);
}

Copiado para a área de transferência.