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

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

現実生活のオブジェクトは、即座に動いたり停止したりすることはなく、一定の速度で動くことはほとんどありません。引き出しを開けるとき、私たちは最初にそれをすばやく動かし、出てくるときはゆっくりと動かします。床に何かを落とすと、最初に下に向かって加速し、床に当たった後跳ね返ります。

このページは、適切なイージング関数の選択に役立ちます。

オープンソース
サイトの翻訳にご協力ください
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 {
}
イージングの確認:
現在の関数:
現在の関数
線形関数:
線形関数