イージング関数チートシート

イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。

現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。

あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。

オープンソース
サイトの翻訳にご協力ください
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
CSSでは、transitionプロパティとanimationプロパティでイージング関数を指定できます。
.block {
	transition: transform 0.6s ;
}
cubic-bezier.comで編集できます。
CSSでは、この関数は@keyframesを使用して実行できます。:
サイズ
読み込み中です...
位置
読み込み中です...
透明度
読み込み中です...
PostCSS
PostCSSは、イージング関数の記述がより簡単です。このサイトからtransition情報を取得するプラグインpostcss-easingsがあります。
.block {
	transition: transform 0.6s ;
}
その宣言は上記のものに変換されます。
残念ながら、このイージング関数はPostCSSプラグインでは設定できません。@keyframesで実行できます。上記を参照してください。
グラデーション
postcss-easing-gradientsを使用してグラデーションを描くことができます。
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
数学関数
以下に、TypeScriptで書かれたイージング関数のコードを示します。変数xはアニメーションの絶対的な進行度を0(アニメーションの開始)と1(アニメーションの終了)の範囲で表します。
function (x: number): number {
}
以下に、TypeScriptで書かれたイージング関数のコードを示します。変数xはアニメーションの絶対的な進行度を0(アニメーションの開始)と1(アニメーションの終了)の範囲で表します。
function (x: number): number {
}
イージングの確認:
現在の関数:
現在の関数
線形関数:
線形関数