Cheat Sheet para funções de easing

Funções de easing especificam a taxa de alteração de um parâmetro ao longo do tempo.

Objetos na vida real não começam e param instantaneamente e quase nunca se movem a uma velocidade constante. Quando abrimos uma gaveta, primeiro a movemos rapidamente e diminuímos a velocidade à medida que sai. Deixe algo cair no chão e ele primeiro acelerará caindo e saltará depois de bater no chão.

Esta página ajuda a escolher a função de easing correta.

Open Source
Ajude a traduzir o site para seu idioma
xt
easeInSine
xt
easeOutSine
xt
easeInOutSine
xt
easeInQuad
xt
easeOutQuad
xt
easeInOutQuad
xt
easeInCubic
xt
easeOutCubic
xt
easeInOutCubic
xt
easeInQuart
xt
easeOutQuart
xt
easeInOutQuart
xt
easeInQuint
xt
easeOutQuint
xt
easeInOutQuint
xt
easeInExpo
xt
easeOutExpo
xt
easeInOutExpo
xt
easeInCirc
xt
easeOutCirc
xt
easeInOutCirc
xt
easeInBack
xt
easeOutBack
xt
easeInOutBack
xt
easeInElastic
xt
easeOutElastic
xt
easeInOutElastic
xt
easeInBounce
xt
easeOutBounce
xt
easeInOutBounce

x
t
CSS
Em CSS, as propriedades 'transition' e 'animation' permitem especificar uma função de easing.
.block {
	transition: transform 0.6s ;
}
Editar em cubic-bezier.com.
Em CSS, esta função pode ser implementada usando @keyframes:
Tamanho
Carregando...
Posição
Carregando...
Transparência
Carregando...
PostCSS
No PostCSS, a função de easing é muito mais fácil de descrever. Há um plugin, postcss-easings, que tira a informação de transição deste site.
.block {
	transition: transform 0.6s ;
}
Tal declaração é convertida para a descrita acima.
Infelizmente, esta função de easing não pode ser feita com um PostCSS plugin. Pode ser feita com @keyframes, veja acima.
Gradiente
É possível desenhar um gradiente usando o plugin postcss-easing-gradients.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Função matemática
Abaixo está o código desta função de easing escrito em TypeScript. A variável x representa o progresso absoluto da animação nos limites de 0 (começo da animação) e 1 (fim da animação).
function (x: number): number {
}
Abaixo está o código desta função de easing escrito em TypeScript. A variável x representa o progresso absoluto da animação nos limites de 0 (começo da animação) e 1 (fim da animação).
function (x: number): number {
}
Verificar o easing para mudanças de:
Função atual:
Função atual
Função linear:
Função linear