easingとは？アニメーションの減速・加速を作る方法【cubic-bezierも解説】

アニメーションが「どこか硬い」と感じたことはありませんか？

それは 速度が一定だから かもしれません。

そこで登場するのが easing（イージング） です。

easingとは？

easingとは、

アニメーションの「速度カーブ」を調整する仕組み

です。

動きの途中でスピードを変化させます。

例えば：

• 最初ゆっくり → 途中速く → 最後ゆっくり
• 最初速い → だんだん減速

現実世界の動きに近づけるための技術です。

アニメーションの基本ループがまだ曖昧な方は、
先に「requestAnimationFrameの使い方」を読むと理解が深まります。

1. 一定速度（linear）はなぜ不自然？

一定速度（linear）

（※上記は「時間」と「進行度」の関係図）

一直線になっています。

これは：

時間が50% → 進行も50%
時間が80% → 進行も80%

常に同じ割合で進みます。

現実では、物体は急に動き出したり止まったりしません。

だから不自然になります。

2. easingを使うとどう変わる？

ease-in-out（自然な動き）

カーブになっています。

• 最初ゆっくり
• 中盤速く
• 最後ゆっくり

これが自然な動きです。

3. 仕組みはとてもシンプル

アニメーションではまず「進行度」を作ります。

progress = 経過時間 / 全体時間

progress は「どれだけ進んだか」を表す 0〜1 の値です。
0 は開始、1 は完了。
easing は、この progress を 別の0〜1に変換する関数 です。

通常のlinearなら：

position = start + (end - start) * progress

easingを入れると？

position = start + (end - start) * ease(progress)

違いはたったこれだけ。

progressをそのまま使うか、変換するか

それだけです。

progressの仕組みは「deltaTime」と強く関係しています。
時間制御がまだ曖昧な場合はこちらも参照してください。

4. 一番簡単なeasing関数

ease-in（だんだん速く）

function easeIn(t) {
  return t * t;
}

小さい値はさらに小さくなります。

つまり：

• 最初ゆっくり
• 後半速く

になります。

5. cubic-bezierとは？

CSSでよく見るこれ：

transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

これはカーブの形を数値で決める方法です。

cubic-bezierのイメージ

4つの値は「曲がり方」を決めています。

初心者段階では、

• linear
• ease-in
• ease-out
• ease-in-out

この4つが分かれば十分です。

6. よく使うeasingまとめ

7. まとめ

easingとは：

0〜1の進行度を、別の0〜1に変換する仕組み

やっていることは単純です。

1. progressを作る
2. 変換する
3. 位置計算に使う

それだけです。

8. 実験：linearとease-in-outを比較する

下のデモで Linear / Ease-in-out を切り替えてください。
スタートとストップ付近の「自然さ」がどう変わるかを観察します。

観察ポイント

• 動き始めはどちらが自然に見えますか？
• 止まる直前はどちらが自然に見えますか？
• 「機械っぽい」と感じるのはどちらですか？

🔎 このラボの全体像はこちら
→ UI Architecture Roadmap