CSSイージングとcubic-bezier入門｜ease/linearの違いと4点の意味を解説

ボタンにマウスを乗せたときの色の変化や、メニューがスッと開くアニメーション。同じ「0.3秒で動く」でも、動き出しと止まり方の調子が違うだけで、印象は大きく変わります。この変化の緩急（スピードの付け方）を決めるのがイージング（easing）です。本記事では、CSSのイージングと、その自由な設計を可能にするcubic-bezierについて、初心者の方でも仕組みが分かるように順を追って解説します。

イージングとは何か

イージングとは、アニメーションの「時間の進み」に対して「変化の進み」をどう対応させるか、というカーブのことです。たとえば要素を0pxから100pxへ0.3秒かけて動かすとき、最初から最後まで一定速度で動かすのか、ゆっくり動き出して加速するのか、勢いよく動いて最後にスッと止まるのか。この速度配分こそがイージングです。

現実世界の物体は、いきなり最高速度では動きません。止まっている物は徐々に加速し、動いている物は徐々に減速して止まります。この物理的な感覚に近い速度配分を画面上で再現することで、アニメーションは「自然で気持ちいい」ものになります。逆に、終始一定速度の動きは機械的で、どこか味気なく感じられます。

CSSでは、このイージングをtransition-timing-functionやanimation-timing-functionというプロパティで指定します。いくつかの定番キーワードが用意されているほか、cubic-bezier()という関数を使えば、自分の好きな緩急のカーブを自由に設計できます。

定番キーワード：ease／linear／ease-in-out

まずは、CSSにあらかじめ用意されているキーワードを押さえましょう。これらはすべて、内部的には特定のcubic-bezierに対応しています。

linearは最初から最後まで同じ速度で進みます。回転し続けるローダーや、点滅など「自然さより一定さ」が欲しい場面に向きます。easeは何も指定しないときの既定値で、多くの場面でそれなりに自然に見えます。

覚えておくと便利なのが「in＝動き出し、out＝止まり際」という対応です。ease-inは動き出しがゆっくり、ease-outは止まり際がゆっくりです。要素が画面に入ってくる演出にはease-out、画面から出ていく演出にはease-inが向くなど、方向性で使い分けると効果的です。ease-in-outは両端がゆっくりで真ん中が速い、最もバランスの取れた動きです。

cubic-bezierの4つの値の意味

定番キーワードでは表現しきれない、独自の緩急を作りたいときに使うのがcubic-bezier()です。書式は次の通りで、4つの数値を取ります。

cubic-bezier(x1, y1, x2, y2)

この4つの数値は、2つの制御点（コントロールポイント）の座標を表しています。(x1, y1)が1つ目の制御点、(x2, y2)が2つ目の制御点です。イメージしやすいよう、横軸と縦軸を次のように考えてください。

• 横軸（x）＝時間の進み：0が開始、1が終了。x1とx2は必ず0〜1の範囲でなければなりません。
• 縦軸（y）＝変化の進み：0が開始状態、1が完了状態。y1とy2は0〜1を超えてもよい（マイナスや1以上も指定可能）。

曲線は必ず始点(0, 0)から終点(1, 1)へつながり、その途中の形を2つの制御点が引っ張って決めます。yが0〜1の外に出ると、いったん行き過ぎて戻る「跳ね返り」のような動きも表現できます。実際に数値を動かして曲線がどう変わるかは、cubic-bezier生成ツールでスライダーやハンドルを操作しながら見ると一目で理解できます。

ちなみに、先ほどの定番キーワードもこの形で表せます。たとえばeaseはcubic-bezier(0.25, 0.1, 0.25, 1.0)、ease-in-outはcubic-bezier(0.42, 0, 0.58, 1.0)、linearはcubic-bezier(0, 0, 1, 1)に相当します。

制御点と曲線の関係

cubic-bezierの感覚をつかむコツは、「制御点が曲線を引っ張っている」とイメージすることです。曲線は始点と終点を結びますが、その間の傾きは制御点の位置に引き寄せられます。傾きが急なところは「速い」、緩いところは「遅い」を意味します。

動き出しを決める1つ目の制御点

1つ目の制御点(x1, y1)は、おもに動き出し（序盤）の調子を決めます。y1を小さく（0付近やマイナスに）すると、序盤は変化が少なく＝ゆっくり始まります。これがease-in的な動きです。逆にy1を大きくすると、いきなり大きく動き出します。

止まり際を決める2つ目の制御点

2つ目の制御点(x2, y2)は、おもに止まり際（終盤）の調子を決めます。y2を1付近や1以上にすると終盤で変化が落ち着き＝ゆっくり止まります（ease-out的）。y2を1より大きくしてから戻すと、目標を一度通り過ぎてから戻る「オーバーシュート」になり、弾むような印象を与えられます。

cubic-bezier(0.68, -0.55, 0.27, 1.55)

上の例のようにy1をマイナス、y2を1以上にすると、最初に少し引いてから飛び出し、最後に行き過ぎて戻る、ばね（バウンス）のような動きになります。数値と曲線、そして実際の動きの対応は、頭で考えるよりcubic-bezier生成ツールでハンドルを動かしてプレビューを見るほうが圧倒的に早く身につきます。

自然な動きの作り方

「自然で気持ちいい」と感じるアニメーションには、いくつかの共通する作り方のコツがあります。

• 終わりをゆっくりに（ease-out寄り）：人の目は止まる瞬間に注目しがちです。終盤を緩やかに減速させると、丁寧で上質な印象になります。UIの多くはease-out系が無難です。
• linearは避ける（回転以外）：一定速度の移動は機械的に見えます。装飾的な動きにはほぼ常にイージングを付けましょう。
• 時間は短めに：UIの反応は0.15〜0.3秒程度が心地よい目安です。長すぎる動きはかえってストレスになります。
• やりすぎない：オーバーシュートやバウンスは効果的ですが多用は禁物。ここぞという場面に絞ると映えます。

色やグラデーションの変化をアニメーションさせる場合も、イージングは同じように効きます。たとえばボタンの背景グラデーションをホバーで滑らかに変化させたいときは、CSSグラデーション生成ツールで土台のグラデーションを作り、その変化にease-outなどのイージングを組み合わせると、上品な仕上がりになります。

transition／animationでの指定方法

最後に、実際のCSSコードでの書き方を確認しましょう。指定する場所はおもに2つ、transitionとanimationです。

transitionでの指定

transitionは、状態が変わったとき（ホバーやクラス付与など）に滑らかに変化させる仕組みです。timing-functionの部分にイージングを書きます。

transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);

これは「transformを0.3秒かけて、指定したばね風のカーブで変化させる」という意味です。ショートハンドではなく、transition-timing-function: ease-out;のように個別指定もできます。

animationでの指定

キーフレームを使うanimationでも考え方は同じで、animation-timing-functionでイージングを指定します。

animation: slidein 0.4s ease-out forwards;

イージングは派手な装飾ではなく、UIの質を底上げする縁の下の力持ちです。まずはcubic-bezier生成ツールで曲線を触り、動きの感覚をつかんでから、transitionやanimationに貼り付けてみてください。数値の意味が腑に落ちると、思い通りの緩急を自在に設計できるようになります。あわせてCSSグラデーション生成ツールで見た目の土台を整えれば、動きと装飾の両面から完成度を高められます。

なお本記事は一般的な情報の提供を目的としたものです。CSSの仕様やブラウザの対応状況は変化することがあるため、実装にあたっては最新の公式ドキュメントを確認のうえ判断してください。