「〜な感じ」を表現するeasingって？

CSSのeasing
easingのカスタマイズ
easingを分析してみました
transitionアニメーションの注意点
まとめ
参考

こんにちは。エンジニアの島です。

webサイト制作する際、デザインはもちろん、心地よいタイミングで効果的なアニメーションを取り入れることで、サイトの印象はだいぶ変わってきます。

アニメーションをつけていく際、現場では「もうすこしリッチ（高級感）な感じ」とか、「かっこよい感じ」みたいなやり取りがかわされるわけですが、これらを動きに落とし込むときに、なにかコツってあるのかな、と思い、CSS Transitionのeasingをベースに調査をしてみました。

CSSのeasing

CSS transitionのタイミング制御をするプロパティであるtransition-timing-functionには、基本となる下記の値が設定でき、動きのグラフはベジェ曲線を描きます。

linear
- 一定
- グラフ：直線
ease-in（cubic-bezier(0.42, 0, 1, 1)）
- 動き始めはゆっくりで、最後に速く
- 動き出しが重いため、サイトやアプリの反応が悪く見えるおそれがある
- 適した秒数：200 ～ 500 ミリ秒
- グラフ：アンダースロー風
ease-out（cubic-bezier(0.42, 0, 0.58, 1)
- 高速で動き出し、最後に減速
- 初速が速いのでアニメーションの反応が早く感じられ、最後は減速するので自然に見える。ユーザーインターフェースの動作に最適。(by google)
- 適した秒数：200 ～ 500 ミリ秒
- グラフ：オーバースロー風の放物線
ease-in-out（cubic-bezier(0.42, 0, 0.58, 1)）
- 車の加速と減速に似ている
- ease-inの効果で出だしが重くなるので、秒数の設定に注意が必要
- 適した秒数：300 ～ 500ミリ秒
- グラフ：S字
ease（cubic-bezier(0.25, 0.1, 0.25, 1)）
- 自然な動き
- 初期値
- グラフ：ゆるやかなS字

ease-in-outは、ease-inとease-outをかけあわすのでcubic-bezier(0.42, 0, 0.58, 1)になるわけですね！

easingのカスタマイズ

これらベースとなる動きをもとに、好みの値を設定するとオリジナルのeasingを適用できます。代表的な生成ツールは下記のようなもの。

easingを分析してみました

いくつか、デザインを引き立てる素敵な動きをしているなと思ったサイトのeasingを分析してみました。（※部分的にアレンジしています）

資生堂マキアージュ

印象（〜な感じ）：つるんとした、なめらか、リッチ

See the Pen 180928_sample1_1 by Miki Shima(EVOWORX) (@shima_evo) on CodePen.

使われていたeasing（抜粋）
.ttl:after transform 0.7s cubic-bezier(0.55, 0.05, 0.22, 0.99)
http://cubic-bezier.com/#.55,.05,.22,.99

ease-in-outの曲線に似た、カスタムイージングです。

See the Pen 180928_sample1_2 by Miki Shima(EVOWORX) (@shima_evo) on CodePen.

使われていたeasing（抜粋）
.ttl transform 0.3s cubic-bezier(0.46, 0.1, 0.29, 1)
http://cubic-bezier.com/#.46,.1,.29,1

こちらは、easeの曲線に似た、カスタムイージング。

See the Pen 180928_sample1_3 by Miki Shima(EVOWORX) (@shima_evo) on CodePen.

上記のeasingをdelayも併用しながら組み合わせています。要素が増えてもまとまって見えます。

Fondation CHU Sainte-Justine

印象（〜な感じ）：POP、やわらかい

See the Pen 180928_sample2_1 by Miki Shima(EVOWORX) (@shima_evo) on CodePen.

See the Pen 190928_sample2_2 by Miki Shima(EVOWORX) (@shima_evo) on CodePen.

使われていたeasing（抜粋）
.ttl:before 　all 0.6s ease
.ttl:after all 0.4s ease

基本のeaseを使用していますが、秒数をずらすことで重なる表現を演出しています。

ザッツ株式会社

印象（〜な感じ）：スポーティ、活発、ダイナミック

See the Pen 180928_sample3 by Miki Shima(EVOWORX) (@shima_evo) on CodePen.

使われていたeasing（抜粋）
.blk:before transform .3s .9s cubic-bezier(.86,0,.07,1)
.inner:before transform .3s 1.2s cubic-bezier(.86,0,.07,1)
http://cubic-bezier.com/#.86,0,.07,1

easeの曲線を強くしたグラフ、かつ秒数は0.3sと短めで、躍動的になりそうな感じですね。
transition-delayをずらしてタイミングを調整していました。