CSSだけで流れ続けるスライダーを作ってみる
「〜な感じ」を表現するeasingって？
こんにちは。エンジニアの島です。
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をずらしてタイミングを調整していました。
transitionアニメーションの注意点
transformを使うとハードウェアアクセラレーションが適用されるので、transformは（たとえば絶対位置に配置されたアイテムなど）ほかの要素のレイアウトに影響しない要素に適用するとベストな結果が得られます。
多用するともっさりとしてしまうので、ここぞというところで効果的に使うようにしましょう。また、アニメーションしたい要素は必要に応じてabsoluteにするなど工夫すると良いかと思います。
参考：サンプルあり！有名サイトに学ぶ、いま取り入れたいUIデザインのアイデア
まとめ
- 基本のeaseでも、秒数やタイミングの調整で、やわらかい演出が可能
- 秒数は、〜0.6sくらいが多い
- 演出にこだわりを感じるサイトはオリジナルのeasingを設定しているケースが多いが、同じeasingを設定することで統一感が出る
- 秒数やイージングの設定だけでなく、delayを効果的に使うことで、リズムが生まれる
高級感を出す＝秒数を長くすれば良い、ではないのです。このあたりは、研究をつまねばです。
また何かすてきな動きのサイトがあれば、勉強かねて更新したいと思います！
