少しの工夫でグッと良くなる！CSSアニメーションで心地よい動きを実装するためのポイント

あなたを優しく、包みたい。
茂った木の葉の間から漏れてさす日の光のように・・・

チョヌン、茂吉イムニダ。

前回はvelocity.jsのオプション機能についてご紹介しました。
velocity.jsは普段からjQueryに触れている方にとっては理解しやすく、アニメーションの滑らかさや実行速度の軽快さなどのメリットを感じてもらえたのではないでしょうか。

今回はCSSアニメーションのイージングとdurationについて書いていきたいと思います。
「イージングの値はだいたい”ease”です。」「durationは大抵同じ値です。」という方、気軽にご一読ください。
いつもの実装に少し手間を加えるだけで、サイトの印象をグッと良くする方法を紹介したいと思います。

CSSアニメーションを実装するためのtransitionプロパティ

transitionプロパティは、transition効果（時間的変化）をまとめて指定する際に使用します。
transitionプロパティでは、以下の4つのプロパティをまとめて指定することができます。

  • transition-property（transition効果を適用したいCSSプロパティ名を指定）
  • transition-duration（transitionの再生時間を指定）
  • transition-timing-function（イージングを指定）
  • transition-delay（遅延時間を指定）

次のコードでは.sampleのcolorプロパティの値を0.3秒かけて変化させています。.sampleを付与した要素へマウスオーバーした後、0.5秒遅延してアニメーションが開始します。

.sample {
  color: #000;
  transition: color 0.3s ease 0.5s;
}
.sample:hover{
  color: #0090ff;
}

See the Pen CSS transition-sample by seiya kato (@mokichi) on CodePen.


transitionプロパティの特徴

  • 実行後はアニメーションしたCSSプロパティの値は元に戻る（逆再生される）
  • :hoverやクラスの付与などでアニメーションが開始する
  • 再生回数やループは指定できない

イージングについて

CSSアニメーションでイージングをかけるためのtiming-functionには、以下を指定することができます。

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear
  • cubic-bezier(数値, 数値, 数値, 数値)
  • step-start
  • step-stop
  • steps(数値, end)

今回の記事では、cubic-bezier（キュービックベジェ）というタイミング関数を中心に解説していきます。cubic-bezierでイージングを指定することで、加速・減速を細かく調整することができます。

cubic-bezierを簡単に指定する

cubic-bezierはイージングを細かく設定することができますが、一つ一つ自分で値を設定するのはとても大変です。

以下のサイトには、CSSに限らず一般的によく使われている代表的なイージングがまとめられています。

Easing Function 早見表

※ 本記事内のサンプルに使用するアニメーションではこのイージング名を元に説明します。
※ Elastic、Bounceのイージング関数はCSSでは使用できません。
※ 本記事内のサンプルではどのイージング関数を使用しているかわかりやすくするため、SCSSでイージング関数を変数に格納して記述しています。CSSで表示を確認したい場合は、デモ内のSCSSタブをクリックし、右下にある「View Compiled」でコンパイルしてご確認ください。

See the Pen timing-function-sample by seiya kato (@mokichi) on CodePen.

これだけ種類があると、何を指定してすればよいかわからなくなり、「とりあえずeaseをかけておこう。。」となってしまいがちです。

イージングに何を指定したらよいか悩んだら

そんな時はまずアニメーションを加速させるのか、減速させるのか、加速させて減速させるのかを先に考えます。

  • 徐々に加速・・・easeIn
  • 徐々に減速・・・easeOut
  • 徐々に加速し、徐々に減速・・・easeInOut

次にどのタイミング関数にするかを選びます。
以下は、滑らかさが下に行くにつれて急になります。

  1. Sine（もっとも緩やかな変化）
  2. Quad
  3. Cubic
  4. Quart
  5. Quint
  6. Expo（もっとも急激な変化）

個人的には、じわっとした動きやふわっとした印象を与えたい場合は1〜2を、軽やかな動きを取り入れたい時は4〜6あたりを使用しています。
3のCubicは多少軽快な動きを取り入れつつふわっとした印象を与えたい時に使います。

サンプルその1 画像の拡大

よくある実装方法

  • transition: all 0.6s ease;

See the Pen thumbnail-animation-ease by seiya kato (@mokichi) on CodePen.

バリエーション1

  • transition: transform 4s $easeInOutSine, opacity 0.4s ease-in;

transformのイージングをeaseInOutSineに変更し、durationを4sに変えることで画像がじんわり拡大されるようになります。
※ transitionプロパティのtransition-propertyをall（すべて）ではなく、transformとopacityの各プロパティに設定できるよう2つに分けています。

See the Pen thumbnail-animation-Sine by seiya kato (@mokichi) on CodePen.

バリエーション2

  • transition: transform 1s $easeOutQuart, opacity 0.3s ease-out;

transformのイージングをeaseOutQuartに変更することで軽やかに画像が拡大される印象を与えます。

See the Pen thumbnail-animation-Cubic by seiya kato (@mokichi) on CodePen.

サンプルその2 枠線を表示

よくある実装方法

  • transition: box-shadow 0.6s ease;

See the Pen 枠線-アニメーション by seiya kato (@mokichi) on CodePen.

バリエーション

  • transition: box-shadow 0.6s $easeOutQuint;

「よくある実装方法」では、マウスオーバーをした後に枠が遅れて動き出す印象ですが、「バリエーション」ではeaseOutQuintにすることで、マウスオーバーをしてすぐに動き出すようになります。

See the Pen 枠線-アニメーション-2 by seiya kato (@mokichi) on CodePen.

サンプルその3 下から画像フェードイン

よくある実装方法

  • 左画像：transition: all 0.8s ease;
  • 中画像：transition: all 0.8s ease 0.1s;
  • 右画像：transition: all 0.8s ease 0.2s;

See the Pen float-animation by seiya kato (@mokichi) on CodePen.

バリエーション

  • 左画像：transition: transform 1s $easeOutQuart, opacity 0.8s $easeOutSine ;
  • 中画像：transition: transform 1s $easeOutQuart 0.1s, opacity 0.8s $easeOutSine 0.1s;
  • 右画像：transition: transform 1s $easeOutQuart 0.2s, opacity 0.8s $easeOutSine 0.2s;

transformのイージングをeaseOutQuartにすることで動き出しと停止にメリハリを与えます。

See the Pen float-animation-2 by seiya kato (@mokichi) on CodePen.

サンプルその4 メニュー表示

よくある実装方法

  • transition: transform 1s ease;

See the Pen ハンバーガーメニュー表示 by seiya kato (@mokichi) on CodePen.

バリエーション

  • transition: transform 0.8s $easeInOutCubic;

イージングをeaseInOutCubicにすることでやわらかい印象を与えます。

See the Pen ハンバーガーメニュー表示2 by seiya kato (@mokichi) on CodePen.

実践その5 ボーダーボタン

よくある実装方法

  • 枠線・・・transition: all 0.3s;

※デフォルトの枠線はbox-shadowプロパティで作成。hover時の枠線はspan要素で作成。

See the Pen button-animation-normal2 by seiya kato (@mokichi) on CodePen.

バリエーション

【mouseover時】

  • 上ボーダー：transition: all 0.1s $easeInOutSine;
  • 右ボーダー：transition: all 0.1s $easeInOutSine 0.1s;
  • 下ボーダー：transition: all 0.1s $easeInOutSine 0.2s;
  • 左ボーダー：transition: all 0.1s $easeInOutSine 0.3s;

【mouseout時】

  • 上ボーダー：transition: all 0.1s $easeInOutSine 0.3s;
  • 右ボーダー：transition: all 0.1s $easeInOutSine 0.2s;
  • 下ボーダー：transition: all 0.1s $easeInOutSine 0.1s;
  • 左ボーダー：transition: all 0.1s $easeInOutSine;

spanで作成した上下左右の枠線に対して個別にアニメーションをかけます。上の枠線から時計回りにtransition-delayを0.1sずつ足して、イージングをeaseInOutSineにすることで線が滑らかに書かれるようなアニメーションになります。
マウスオーバーとマウスアウトのtransition-delayを逆にすることで線が戻るような動きになります。

See the Pen button-animation by seiya kato (@mokichi) on CodePen.

まとめ

以上、transitionプロパティのイージングとdurationを中心にご説明しました。

普段何気なく使っているイージングやdurationも、少し手を加えることで心地良いアニメーションに変化することを実感していただけましたか？
何か違和感を感じるアニメーションは、そのサイトの印象に合ったイージングとdurationを効果的に指定することで解決することができます。

物足りなさを感じた時はイージングやdurationを変更してみたり、逆再生ではなくマウスオーバーとマウスアウトのアニメーションに少し変化を加えてみてください。

少しの工夫でサイト全体の印象がグッと良くなるはずです。

最後までご覧いただきありがとうございました。