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

Apresentamos linear(), uma função de aceleração em CSS que interpola linearmente entre os pontos, permitindo recriar efeitos de salto e mola.

Bramus

Acelerações em CSS

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

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

Quando usadas adequadamente, as acelerações dão a um elemento animado uma sensação de peso à medida que ele parece ganhar impulso.

Não é possível criar curvas complexas, como efeitos de salto ou mola, em CSS, mas, graças a linear(), agora é possível aproximá-las de forma surpreendente.

Introdução a linear()

Uma nova maneira de definir uma aceleração em CSS é com linear(). Essa função aceita vários pontos, separados por vírgulas. Cada ponto é um único número que varia de 0 a 1. Entre cada ponto, a interpolação é feita de maneira linear, explicando o nome da função.

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

Esses pontos são distribuídos de forma equidistante por padrão. No snippet anterior, isso significa que o valor de saída de 0.25 será usado na marca de 50%.

Visualizado, o gráfico de linear(0, 0.25, 1) fica assim:

Se você não quiser que os pontos sejam distribuídos de forma equidistante, poderá transmitir um comprimento de parada. Ao transmitir um valor como um comprimento de parada, você define o ponto de partida dele:

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

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

Ao especificar dois valores como um comprimento de parada, você define o ponto 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.

Criar curvas complexas

Embora os exemplos anteriores sejam acelerações mais simples, você pode usar linear() para recriar funções de aceleração complexas se comprometer parte da precisão.

Considere esta curva de aceleração de salto, um tipo de aceleração que não pode ser expresso diretamente em CSS, 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 não diga muito, uma visualização pode. Confira a saída, visualizada como uma curva azul:

A curva pode ser simplificada adicionando vários pontos a ela. Aqui, cada ponto verde indica uma parada:

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

Compare a caixa animada verde com a azul. É possível notar que ela não é tão suave.

No entanto, se você adicionar pontos suficientes, poderá aproximar a curva original. Confira uma versão atualizada:

Ao dobrar o número de pontos, você já tem um resultado suave.

O código usado para animar fica assim:

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 manualmente essa lista de pontos seria muito complicado. Felizmente, Jake e Adam criaram uma ferramenta para ajudar você a converter uma curva de aceleração na contraparte linear().

A ferramenta usa uma função de aceleração JavaScript ou uma curva SVG como entrada e gera a curva simplificada usando linear(). Use os controles deslizantes para controlar o número de pontos desejados e a precisão deles.

No canto superior direito, também é possível escolher uma das predefinições: Spring, Bounce, Simple elastic ou Material Design emphasized easing.

Suporte do DevTools

O DevTools oferece suporte para visualizar e editar o resultado de linear(). Clique no ícone para mostrar uma dica interativa que permite arrastar os pontos.

Esse recurso do DevTools está disponível no DevTools do Chrome 114.