dataviz.jp

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

時間の経過に伴うパラメーターの変化を可視化

easings.dataviz.jp

どんなツールか？

アニメーションやトランジションで値が時間とともにどのように変化するかを示す「イージング関数」の一覧・早見表サイトです。視覚的に様々なイージング（加速・減速・バウンスなど）の挙動を比較して選べます。イージング関数は、アニメーションに自然な動きを与えるための速度変化を定義します。

機能

• イージング関数一覧表示…多数のイージング関数（例：easeInSine、easeOutBounce など）を一覧で閲覧。 
• グラフによる視覚比較…それぞれの関数が時間（t）に対してどのように変化するかグラフで確認可能。 
• CSS やコード例の提示…それぞれの関数の使い方を CSS Transition / Animation やコードとして示す情報が含まれている場合あり。 
• リアルタイムプレビュー…選んだ関数の動きを視覚的に確認できる UI。 

使い方

• 1. 関数を選択…一覧から目的のイージング関数をクリックまたは選択します。 
• 2. 挙動を確認…選んだ関数のグラフやプレビューで値の変化の仕方を比較します。 
• 3. プロジェクトへの適用…関数名／コードをコピーして、アニメーションライブラリや CSS の Timing Function などに貼り付けて使用します。