CSSイージングのお手本 - ease-out, ease-in, linearの使い分け

2023年4月24日メンテナンス済み / 株式会社ICS 加賀篤史

イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表すものです。適切なイージングを設定することで、ユーザーへ与える印象がかわります。ユーザー体験をデザインするうえでイージングは欠かせない要素です。しかし、イージングは多くの種類があり、それぞれを把握し的確に使い分けるのは少し難易度が高いかもしれません。本記事はイージングの選定に役立つ、お手本的な使い分け方を紹介します。

この記事の要約

イーズインは徐々に加速、イーズアウトは徐々に減速。
「イーズアウト」は多くの場面で「変化の余韻が残りやすい印象」でオススメ。
リニア（linear）は透明度の変化に使うとよい。
CSSのデフォルトのイージングは性格が弱いので、cubic-bezier()を使うのがよい。

イージングの性格

冒頭でも触れましたが、イージングは「最初はゆっくりで、徐々に早く変化させる」といった動きの「性格」を指定するものです。たくさんの種類がありますが、大まかに以下の4つに分けられます。

リニア（linear）：等速で変化する。のっぺりとした安定した印象。
イーズイン（ease-in）：徐々に加速する。加速するような勢いのある印象。
イーズアウト（ease-out）：徐々に減速する。変化の余韻が残りやすい印象。
イーズインアウト（ease-in-out）：加速してから減速。

CSSでイージング関数を指定するには、以下のように記載します。

/* CSSトランジションの場合 */
.example {
  transition-property: all;
  transition-duration: 1s;
  /* イージングを指定 */
  transition-timing-function: linear;
}

.example-2 { 
  /* まとめて書けます */
  transition: all 1s linear;
}

/* CSS アニメーションの場合 */
.example {
  animation-name: motion-x;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  /* イージングを指定 */
  animation-timing-function: linear;
}

.example-2 {
  /* まとめて書けます */
  animation: motion-x 2s infinite forwards linear;
}

CSSで色々なイージングを使うには

CSSではtransitionプロパティを使うことが多いですが、transitionにはイージングが「linear」「ease-in」「ease-out」「ease-in-out」「ease」の5種類しか用意されていません。これらは性格が弱く、とくに動きにメリハリを付けたい場合には不向きです。

そこで、3次ベジェ曲線でイージングを設定できるcubic-bezier()関数を使うのがオススメです。cubic-bezier()関数は3次ベジェ曲線のコントロールポイントの座標を指定するのですが、数値だけでは実際の動きがイメージできず少し扱いづらいものとなっています。

この問題を解決する手段として、イージング関数チートシートやCeaserといった視覚的にイージングの曲線を描けるツールを利用します。必要なパラメーターをコピー&ペーストで使えます。

利用頻度の高いパラメーターをピックアップしました。ここで掲載するのは代表的なものだけなので、他のイージングの強さを参照したい方は、記事末尾を参考ください。

/* Quint（強いが、Expoより弱め） */
cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
cubic-bezier(0.23, 1, 0.32, 1); /* easeOutQuint */
cubic-bezier(0.86, 0, 0.07, 1); /* easeInOutQuint */

/* Expo（強い） */
cubic-bezier(0.95, 0.05, 0.795, 0.035); /* easeInExpo */
cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
cubic-bezier(1, 0, 0, 1); /* easeInOutExpo */

cubic-bezierの値は数値だけだとわかりづらいので、CSSコメントも一緒に残しておいたほうがいいでしょう。

イージングのさまざまな強さ

イージングには性格の「強さ」が6種類（Sine・Quad・Cubic・Quart・Quint・Expo）あり、「easeOutSine」「easeInOutExpo」といった表記がされます。

▲ Sine < Quad < Cubic < Quart < Quint < Expoの順で性格が強くなる

※ SineやExpo等の定義はイージングの第一人者であるRobert Penner氏が公開されている『Robert Penner’s Easing Functions』がもとになっています。

その他にも、以下のように特殊な動きをするイージングもあります。

Circ： Expoのような強さを持つが、加速や減速の時間がよりゆるやか。
Back：少し行き過ぎてから戻ってくるような動き。
Elastic：バネを離した時の往復するような動き。
Bounce：ボールが跳ねるような跳ね返りの動き。

イーズアウト・イーズインの使い分け

たとえば何かを登場させたい、移動させたいといったアニメーションには「イーズアウト」を基本的に使用します。動きに余韻を残すことで、ユーザーの意識を次の動作へスムーズに移行させます。

▲ 背景を「リニア」で表示。すぐ次の動作がはじまります。余韻がない。

▲ 背景を「イーズアウト」で表示。余韻のあとに次の動作がはじまります。

ユーザーの操作によってアニメーションが発生する場合は、動き出しの早いイージングを設定する、アニメーションの時間を短くするといったユーザーへのフィードバックがすぐに返せるアニメーションを意識することも重要です。

▲「イーズイン」でアニメーション。クリックしてからワンテンポ遅れます。

▲ 背景を「イーズアウト」でアニメーション。クリックしてすぐに反応します。

「イーズアウト」はもっとも汎用的に使えるイージングです。適切なものが分からない、作り込んでいる時間がないといった場合でも、とりあえずデフォルトで設定されているイージングから「イーズアウト」に変えるだけで表現のレベルを上げられます。とくにイーズアウトは「Quint」「Expo」の強いイージングがオススメです。

「イーズイン」は勢いのある演出を表現したい場合に使用します。移動に合わせてスケール値を変化させるとより効果的です。他にもゆっくりとフェードアウトさせたい場合に、スポットライトの明かりが徐々に絞られていくような表現ができます。

リニア（等速）の使い所

「リニア」を使うと野暮ったい印象になるケースが多いのですが、短いフェードの演出、とくに連続したアニメーションをさせたい場合に筆者はよく使用しています。

フェードの場合、透明度が0%や100%に近いときは変化がないように見えます。そのため、「イーズアウト」などを設定すると最後の余韻の部分が変化のない「意図しない間」に見えてしまうためです。

▲ 文章を「イーズアウト」でアニメーション。見出しが表示されたときに、止まって見える間が存在します。

これを解消するために「リニア」を用います。「リニア」に変えてアニメーションの秒数を短くすると同じような動きに見え、間がなくなるためアニメーションのテンポがよくなります。

▲ 文章を「リニア」でアニメーション。連なった文章の表示テンポが良くなりました。

CSSのlinear()関数で自由な動きを作る

CSSのtransition-timing-functionプロパティには、linear値のほかにlinear()という関数も指定できます。linear()関数を使うと、複数の点を線形補間できます。引数には0（開始値）から1（終了値）の値を複数指定します。

バウンスのようなイージングはcubic-bezier()関数では指定できませんでしたが、linear()関数をつかえば自由にイージングを作れます。

.motion-x {
  animation: motion-x 1s infinite forwards;
  /* 真ん中をゆっくり */
  animation-timing-function: linear(0, 0.45, 0.48, 0.52, 0.55, 1);

  /* ぼよんぼよんする動き */
  /* animation-timing-function: linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); */
}
@keyframes motion-x {
  from {
    translate: 0%;
  }
  to {
    translate: 100px;
  }
}

linear()関数はChrome 113（2023年4月）やFirefox 112（2023年4月）以上で利用できます（参照『Can I Use…』）。

参考：イージングの強さ一覧

cubic-bezier()関数で指定可能な値をまとめたので参照ください。

cubic-bezier(0.0, 0.0, 1.0, 1.0) /* linear */

/* Sine（最も弱い） */
cubic-bezier(0.47, 0, 0.745, 0.715); /* easeInSine */
cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine */
cubic-bezier(0.445, 0.05, 0.55, 0.95); /* easeInOutSine */

/* Quad（弱め。Sineより強く、Cubicより弱い） */
cubic-bezier(0.55, 0.085, 0.68, 0.53); /* easeInQuad */
cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOutQuad */
cubic-bezier(0.455, 0.03, 0.515, 0.955); /* easeInOutQuad */

/* Cubic（Quadより強く、Quartより弱い） */
cubic-bezier(0.55, 0.055, 0.675, 0.19); /* easeInCubic */
cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */

/* Quart（Cubicより強く、Quintより弱い） */
cubic-bezier(0.895, 0.03, 0.685, 0.22); /* easeInQuart */
cubic-bezier(0.165, 0.84, 0.44, 1); /* easeOutQuart */
cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */

/* Quint（Quartより強く、Expoより弱い） */
cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
cubic-bezier(0.23, 1, 0.32, 1); /* easeOutQuint */
cubic-bezier(0.86, 0, 0.07, 1); /* easeInOutQuint */

/* Expo（最も強い） */
cubic-bezier(0.95, 0.05, 0.795, 0.035); /* easeInExpo */
cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
cubic-bezier(1, 0, 0, 1); /* easeInOutExpo */

/* Circ（Expoのような強さを持つが、加速や減速の時間がよりゆるやか。） */
cubic-bezier(0.6, 0.04, 0.98, 0.335); /* easeInCirc */
cubic-bezier(0.075, 0.82, 0.165, 1); /* easeOutCirc */
cubic-bezier(0.785, 0.135, 0.15, 0.86); /* easeInOutCirc */

/* Back（少し行き過ぎてから戻ってくるような動き） */
cubic-bezier(0.6, -0.28, 0.735, 0.045); /* easeInBack */
cubic-bezier(0.175, 0.885, 0.32, 1.275); /* easeOutBack */
cubic-bezier(0.68, -0.55, 0.265, 1.55); /* easeInOutBack */