RevealTheme logo

Gerador de Curvas de Aceleração Cubic Bezier

Crie curvas de aceleração cubic-bezier para CSS. Inclui predefinições padrão.

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

O que é o Gerador de Curvas Cubic Bezier?

As animações CSS usam funções de aceleração (easing) para controlar como os valores mudam ao longo do tempo. Os quatro parâmetros de cubic-bezier definem uma curva de (0,0) a (1,1): quanto mais acentuada a curva, mais rápida é a animação naquela região. As predefinições comuns cobrem a maioria das necessidades; as curvas personalizadas criam um movimento distintivo.

Perguntas frequentes

Qual é a diferença entre ease e ease-in?
ease acelera e depois desacelera. ease-in apenas acelera. ease-out apenas desacelera. ease-in-out faz as duas coisas de forma mais marcada.
Quando devo usar curvas personalizadas?
Quando as acelerações padrão parecem genéricas. As curvas personalizadas sutis criam uma identidade de movimento própria da marca.

Ferramentas relacionadas