Função de tempo de transição - CSS-Tricks

A transition-timing-functionpropriedade, normalmente usada como transitionabreviatura, é usada para definir uma função que descreve como uma transição ocorrerá ao longo de sua duração, permitindo que uma transição mude de velocidade durante seu curso.

.example ( transition-timing-function: ease-out; )

Essas funções de temporização são comumente chamadas de funções de atenuação e podem ser definidas usando um valor de palavra-chave predefinido, uma função de passo ou uma curva de Bézier cúbica.

Os valores de palavra-chave predefinidos permitidos são:

facilidade
linear
facilidade
calma
facilidade de entrada
passo inicial
degrau

Para alguns valores, o efeito pode não ser tão óbvio, a menos que a duração da transição seja definida para um valor maior.

Cada uma das palavras-chave predefinidas possui um valor de curva de Bézier cúbico equivalente ou um valor de função de passo equivalente. Por exemplo, os dois valores de função de tempo a seguir seriam equivalentes um ao outro:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Assim como os dois seguintes:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Usando etapas () e curvas de Bézier

A steps()função permite especificar intervalos para a função de cronometragem. Recebe um ou dois parâmetros, separados por uma vírgula: um número inteiro positivo e um valor opcional de startou end. Se nenhum segundo parâmetro for incluído, o padrão será end.

Para entender as funções de revisão, aqui está uma demonstração que usa steps(4, start)para a caixa à esquerda e steps(4, end)para a caixa à direita (passe o mouse sobre uma caixa ou recarregue o quadro para ver as transições):

Confira esta Caneta!

Quando startespecificado, a alteração dos valores ocorre no início de cada intervalo, enquanto endfaz com que a alteração dos valores ocorra no final de cada intervalo.

Uma análise detalhada dos valores da curva de Bézier está além do escopo desta referência, no entanto, consulte as referências na seção de links relacionados para ferramentas que demonstram visualmente como esses valores funcionam.

Para compatibilidade em todos os navegadores compatíveis, os prefixos do fornecedor são necessários, com a sintaxe padrão declarada por último:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

O IE10 (a primeira versão estável do IE com suporte transition-timing-function) não requer o -ms-prefixo.