A propriedade transition-timing-function especifica a curva de velocidade de um efeito de transição. Ela determina quão rápido uma animação começa e termina, além do ritmo em que progride.

transition-timing-function: time_function;

Existem palavras-chave essenciais que descrevem os diferentes time_functions:

• ease - Valor padrão. Um efeito de transição com início lento, depois rápido, e termina lentamente;
• linear - Possui velocidade constante durante toda a transição;
• ease-in - Um efeito de transição com início lento;
• ease-out - Um efeito de transição com final lento;
• ease-in-out - Um efeito de transição com início e final lentos, e meio rápido.

Veja o exemplo a seguir para observar a diferença entre elas. A transição funcionará apenas ao passar o mouse sobre o container.

Curva Bézier Cúbica

Também é possível utilizar a função cubic-bezier() para criar uma timing-function personalizada. Essa função recebe quatro valores que representam os pontos de controle de uma curva bézier cúbica, determinando o formato da função de tempo.

Nota

Não se preocupe. Não é necessário conhecimento em matemática para gerar a função cubic bezier como valor de propriedade CSS. Podemos utilizar a fonte https://cubic-bezier.com/ para gerar nossas funções personalizadas.

Considere o exemplo a seguir para ver como é simples utilizar. A função cubic-bezier foi gerada com a ajuda de arrastar os pontos nessa fonte.

Como resultado, podemos copiar a função acima para nosso arquivo css.