Criar curvas de animação complexas em CSS com a função de easing linear()

Introdução de linear(), uma função de easing no CSS que interpola linearmente entre seus pontos, permitindo que você recrie os efeitos de elasticidade e mola.

Easings no CSS

Ao animar ou fazer a transição de elementos no CSS, você controla a taxa em que um valor muda com uma função de easing usando as propriedades animation-timing-function e transition-timing-function.

Há várias palavras-chave disponíveis como predefinições no CSS, como linear, ease, ease-in, ease-out e ease-in-out. Para criar suas próprias curvas de easing, use a função cubic-bezier() ou adote uma abordagem baseada em etapas com a função steps().

Quando usados adequadamente, os easings dão a um elemento animado uma sensação de peso, já que ele parece ganhar impulso.

Criar curvas complexas, como efeitos de rejeições ou mola, não é possível no CSS, mas graças ao linear() agora é possível fazer uma aproximação delas de maneira surpreendente.

Uma introdução ao linear()

Uma nova maneira de definir um easing no CSS é com linear(). Essa função aceita várias paradas, separadas por vírgulas. Cada parada é um número único que varia de 0 a 1. Entre cada parada, a interpolação é feita de maneira linear, explicando o nome da função.

animation-timing-function: linear(0, 0.25, 1);

Por padrão, essas paradas são distribuídas equidistantemente. No snippet anterior, isso significa que o valor de saída de 0.25 vai ser usado na marca de 50%.

Observado, o gráfico de linear(0, 0.25, 1) tem esta aparência:

Se não quiser que as paradas sejam distribuídas equidistantemente, você pode transmitir um comprimento da parada. Ao transmitir um valor como o comprimento da parada, você define o ponto de partida:

animation-timing-function: linear(0, 0.25 75%, 1);

Aqui, um valor de saída de 0.25 não é usado na marca 50%, mas em 75%.

Ao especificar dois valores como o comprimento da parada, você define os pontos inicial e final:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Um valor de saída de 0,25 será usado de 25% a 75% no tempo.

Como criar curvas complexas com linear()

Embora os exemplos acima sejam easings muito simples, é possível usar linear() para recriar funções de easing complexas de uma maneira muito simples, com a perda de um pouco de precisão.

Veja esta curva de easing de rejeição, um tipo de easing que não pode ser expresso diretamente no CSS e definido usando JavaScript:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Embora o código possa não dizer muito, uma visualização pode. Este é o resultado, visualizado como uma curva azul:

A curva pode ser simplificada adicionando várias paradas. Aqui, cada ponto verde indica uma parada:

Quando transmitido para linear(), o resultado é uma curva que parece semelhante à original, mas é um pouco mais áspera nas bordas.

Compare a caixa animada com verde com a azul e note que ela não está tão fluída.

No entanto, se você adicionar paradas suficientes, poderá estimar bem a curva original. Aqui está uma versão atualizada:

Apenas dobrando o número de paradas, você já obtém um resultado tranquilo.

O código usado para a animação tem esta aparência:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Uma ferramenta para ajudar

Criar essa lista de paradas manualmente seria muito complicado. Felizmente, Jake e Adam criaram uma ferramenta para ajudar a converter uma curva de easing em linear().

A ferramenta usa uma função de easing JavaScript ou uma curva SVG como entrada e gera a curva simplificada usando linear(). Use os controles deslizantes para definir o número de paradas que você quer e a precisão delas.

No canto superior direito, também é possível escolher uma das predefinições: estão incluídas "mola", "elasticidade", "elástico simples" ou "easing do Material Design".

Suporte ao DevTools

Disponível no DevTools, há suporte para visualizar e editar o resultado de linear(). Clique no ícone para mostrar uma dica interativa que permite arrastar as paradas.

Esse recurso está disponível no Chrome 114.

Foto de Howie Mapson no Unsplash (links em inglês)