イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。
現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。
あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
オープンソース
サイトの翻訳にご協力ください
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 {
}イージングの確認:
現在の関数:
現在の関数
線形関数:
線形関数