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()
Compatibilidade com navegadores
- 113
- 113
- 112
- x
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)