イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表すものです。適切なイージングを設定することで、ユーザーへ与える印象がかわります。ユーザー体験をデザインするうえでイージングは欠かせない要素です。しかし、イージングは多くの種類があり、それぞれを把握し的確に使い分けるのは少し難易度が高いかもしれません。本記事はイージングの選定に役立つ、お手本的な使い分け方を紹介します。
この記事の要約
- イーズインは徐々に加速、イーズアウトは徐々に減速。
- 「イーズアウト」は多くの場面で「変化の余韻が残りやすい印象」でオススメ。
- リニア（linear）は透明度の変化に使うとよい。
- CSSのデフォルトのイージングは性格が弱いので、
cubic-bezier()を使うのがよい。
イージングの性格
冒頭でも触れましたが、イージングは「最初はゆっくりで、徐々に早く変化させる」といった動きの「性格」を指定するものです。たくさんの種類がありますが、大まかに以下の4つに分けられます。
- リニア（
linear）： 等速で変化する。のっぺりとした安定した印象。 - イーズイン（
ease-in）： 徐々に加速する。加速するような勢いのある印象。 - イーズアウト（
ease-out）： 徐々に減速する。変化の余韻が残りやすい印象。 - イーズインアウト（
ease-in-out）： 加速してから減速。
CSSで色々なイージングを使うには
CSSではtransitionプロパティを使うことが多いですが、transitionにはイージングが「linear」「ease-in」「ease-out」「ease-in-out」「ease」の5種類しか用意されていません。これらは性格が弱く、とくに動きにメリハリを付けたい場合には不向きです。
そこで、3次ベジェ曲線でイージングを設定できるcubic-bezierを使います。cubic-bezierは3次ベジェ曲線のコントロールポイントの座標を指定するのですが、数値だけでは実際の動きがイメージできず少し扱いづらいものとなっています。
この問題を解決する手段として、cubic-bezier.comや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%に近いときは変化がないように見えます。そのため、「イーズアウト」などを設定すると最後の余韻の部分が変化のない「意図しない間」に見えてしまうためです。
▲ 文章を「イーズアウト」でアニメーション。見出しが表示されたときに、止まって見える間が存在します。
これを解消するために「リニア」を用います。「リニア」に変えてアニメーションの秒数を短くすると同じような動きに見え、間がなくなるためアニメーションのテンポがよくなります。
▲ 文章を「リニア」でアニメーション。連なった文章の表示テンポが良くなりました。
参考：イージングの強さ一覧
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 */
※ 各値はCeaserから引用しています。「Elastic」と「Bounce」については、cubic-bezierでは再現できないため省略されています。
まとめ
イージングを変えるだけで、アニメーションの表情は大きく変わります。制作するものの雰囲気や目的に沿って使用できればベストですが、難しい場合は「easeOutQuint」「easeOutExpo」を設定しておくだけでも見栄えがよくなるので、ぜひお試しください。
また、feb19.jpさんの記事「アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量)」も非常に参考になりますので、よければ合わせてご覧ください。
ICS MEDIAではこの他にもアニメーションについて、記事「あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック」や「CSSだけで表現！ コピペで使えるマイクロインタラクション作りました」にまとめているのでご参考ください。
※この記事が公開されたのは4年前ですが、半年前の2022年9月に内容をメンテナンスしています。