イージング関数チートシートは、アニメーションの時間変化を表すイージング関数を、曲線と実際の動きで比較できるインタラクティブなリファレンスです。Sine、Quad、Cubic、Quart、Quint、Expo、Circ、Back、Elastic、Bounceなどの関数が一覧化されており、それぞれのIn、Out、InOutの違いを視覚的に確認できます。
関数を選ぶと、CSSのtransition-timing-functionで使えるcubic-bezier()、PostCSSでの指定、グラデーションへの応用、TypeScriptで書かれた数学関数のコードを確認できます。サイズ、位置、透明度のサンプルで線形関数との動きの違いも比べられるため、UIアニメーションに合う速度変化を選ぶための実用的なチートシートです。
