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
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