MaterialDesignで学ぶCSS Transition #CSS

この記事はWantedly Advent Calendar 2015 23日目の投稿です。

アニメーション使ってますか？

スマホアプリが普及するにつれてネイティブアプリの強みを活かしたアニメーションをよく見るようになりました。そういったアニメーションをWebでつかいたいと思ったことはありませんか？

jQueryを使ったアニメーションは今までもよく使われていましたが、CSSでもアニメーションが使えるブラウザも増えています。Webも進化しています！

今回の記事ではCSSでアニメーションを使う方法を抑えていきます。

CSSでアニメーション出来ると何が嬉しいの？

単純に負荷がかからないので軽快に動きます。
デメリットとしては、JSの様に複雑な制御が出来ないことでしょう。
用途によって使い分ければいいと思います。

MaterialDesignのアニメーション

タイトルにも書いたMaterialDesignはgoogleが提唱するデザインガイドラインです。
以下の3つの原則が挙げられています。

Material is the metaphor
Bold, graphic, intentional
Motion provides meaning

今回はその中でも「Motion provides meaning」の原則に注目してCSSで意味のある動きを提供したいと思います。

MaterialDesignのAnimationのガイドラインページを見るとアニメーションは4つのセクションに分かれています。

Authentic motion
現実の物体と同じ様な動きをしましょうという内容です。
Responsive interaction
ユーザーのアクションに対応するアニメーションについて書いてあります。
Meaningful transitions
画面の遷移時の動きです。ネイティブアプリの得意な領域だと思います。
Delightful details
アニメーションで喜びを提供しましょう的な内容です。装飾的な意味合いが強い気がします。「おおっ」ってなるアニメーションですね

今回はAuthentic motionに注目していきます。

Authentic motionの概要

MaterialDesignでは「Material is the metaphor」の原則にもとづき一貫して現実の物体と同じ振る舞いをすることを目指しています。
Authentic motionで述べられているのも「現実の物体と同じ動きをするべき」ということです。

ガイドラインにもあるように、「動き始めるときは早く、止まるときはゆっくり止まる」動きを目指しましょう。

CSSアニメーションのおさらい

CSSでアニメーションさせる方法はCSS TransitionとCSS Animationがありますが、今回は比較的簡単なアニメーションを制御するCSS Transitionのみを扱っていきます。

CSS Transitionですがブラウザの対応状況を見るとIE10以降のブラウザだと大体動きます。
対応してないブラウザだとCSS遷移がなくなるだけなので問題ないと思います。

基本的な使い方を確認していきます。

基本的な使い方

CSS3 transitionの基本的なコードです

.hoge {
  height: 20px;
  background-color: #4ea30a;
  color: white;
  transition: height .3s ease;
}

.hoge:hover {
  height: 50px;
}

実行結果

hogeクラスにマウスを当てた時、0.3秒かけてheightが50pxに変化します。
JSのコードなしでアニメーションが実行されているのがわかると思います。

transition: [transition-property: 動かしたい要素] [transition-duration: 動かす時間] [transition-timing-function: アニメーションの種類]
という記法でかけます。

transition-timing-functionの例に関してはこのサイトが便利です。
http://easings.net/ja

動かす秒数は0.3s, .3s, 300msのどれを書いても0.3秒となります。長い時間を書けて動くアニメーションは、使う側からするとイライラすることが多いので避けるのが良さそうです。

CSSでAuthentic Motion

Authentic Motionの実現を目指すにはtransition-timing-functionを上手く決めればいい気がしませんか？

アニメーションの種類ですが、先ほどのサイトからガイドラインに近いアニメーションを探してみるとeaseOutQuart辺りがよさそうです。
easeOutQuartはブラウザ側で用意されていないのでcubic-bezier(0.165, 0.84, 0.44, 1)で指定します。
（正直デフォルトのeaseでもいい感じがします…）

linear, ease, easeOutQuartの比較 (Hoverすると動きます)

アニメーションを組み込む際に気をつけること

ユーザー操作のレスポンスとしてアニメーションを使う状況を想定した例で進めて行こうと思いましたが、遅刻気味なので気を付けたいことだけ書いておきます。

基本的にアニメーションは

ユーザーが何かの操作を行う。
それに対するレスポンスとしてアニメーションが実行される。
の流れになります。

この流れ以外でのアニメーションは違和感を感じるので避けるべきでしょう。
またアニメーションの速度が遅くなると、反応が遅いアプリだと認識されて「使いづらい」「遅い」といわれます。

最後に言いたいのはアニメーションは多用し過ぎるとウザったく感じられることです。適度に使いましょう。