Question 1

O que é uma função cubic-bezier?

Accepted Answer

Uma função cubic-bezier define uma curva suave usada como função de temporização em animações e transições CSS. Ela recebe quatro parâmetros (x1, y1, x2, y2) que controlam a forma da curva.

Question 2

O que faz a propriedade animation-timing-function?

Accepted Answer

A propriedade CSS animation-timing-function especifica como uma animação progride em cada ciclo. Ela controla se a animação acelera, desacelera ou se move em velocidade constante.

Question 3

Qual é a diferença entre ease e ease-in-out?

Accepted Answer

ease começa rápido e desacelera no final. ease-in-out começa devagar, acelera no meio e desacelera novamente no final, criando uma sensação mais natural para a maioria das animações de UI.

Question 4

Os valores y podem sair do intervalo 0 a 1?

Accepted Answer

Sim. Ao contrário dos valores x que devem ficar entre 0 e 1, os valores y podem ultrapassar esse intervalo para criar efeitos de ultrapassagem ou ricochete.

Question 5

Como aplicar a função de temporização gerada a uma animação?

Accepted Answer

Copie o CSS gerado e aplique com animation-timing-function: cubic-bezier(x1, y1, x2, y2) ou transition-timing-function: cubic-bezier(x1, y1, x2, y2) na sua folha de estilos.

Gerador de temporização de animação

Predefinições

Personalizado

Visualização

Perguntas Frequentes

Comments & Feedback