CSSアニメーションを考える前に利用できるプロパティを予習する

f:id:tsubasa123:20170211161956j:plain

こんにちは、つばさ(@tsubasa123)です。

WEBページにおいてアニメーションを考える時はついついJavaScriptを利用してしまいますが、CSS3全盛期の昨今はCSSのプロパティを利用するのが王道というものでしょうか。時代の流れを追うために私もちょっと試してみようと思います。

今日は実装を行う前に予備知識としてプロパティの内容についてと、そもそもなんでアニメーションをするのかについてをつらつらと書きました。

なぜ動かす?

そもそも論ですね。「おもしろい」とか「かっこいい」とか「オシャレ」とか「わかりやすい」とか理由は色々あると思います。WEBサイトの性質によってアニメーションを導入する目的は異なりますが、何かしらの理由があってのことです。

自論ですが、アニメーションを利用してものを動かす理由は大別して、「ユーザビリティを向上させるため」と「視覚効果(演出)を得るため」と、この2つに分けられるんじゃないかと思っています。

それぞれもう少し詳細に確認します。

ユーザビリティ向上のためのアニメーション

まずはユーザビリティの観点から。

  • クリックできるボタンを目立たせるためのアニメーション(点滅や浮遊など)
  • 条件判定のためのアニメーション(入力済みは色を付ける、入力エラーに色を付けるなど)
  • ユーザー支援のためのアニメーション(ナビゲーションやソーシャルボタンの追随など)

よく見かけるのはこんなところでしょうか。WEBサイトに限らず、ブログでも取り入れられている手法だと思います。ここ最近はレスポンシブデザインの影響もあってか追随するナビゲーションを比較的よく見かける気がします。反対に、ブログのサイドバーとかでよく目にしたソーシャルボタンの追随は減ったかな、といった感じです。

視覚効果のみで情報を伝える必要があるWEBサイトではアニメーションを上手に利用することでユーザビリティを高めることができます。その結果、適切な情報を効果的にユーザーに提供できるようになり、ユーザーの好感度アップに貢献してくれるでしょう。

上記で3つほど例をあげましたが、どれにしても、ただやみくもに動かすだけではユーザビリティは向上しません。むしろ下がる原因にもなります。人間は動くものに反応してしまうので、むやみやたらにアニメーションを使うと何が重要な情報なのか、どのように操作したらよいのかなどがわかりにくくなり、ユーザーを困らせてしまう可能性がでてきます。装飾や見栄えを重視した過度なアニメーションは避けた方が良いでしょう。

適切な要素、つまりユーザーに情報を適切に届けるために重要なものに対してだけ、適切なアニメーションを設定することが大切です。色の指定に近いですね、目立たせたいものにだけ赤線を引くような、あんな感覚です。

私がアニメーションを利用・勉強したい理由はこれ。ユーザビリティアップで好感度アップが目的です。

視覚効果(演出)のためのアニメーション

続きまして、視覚効果の観点。こっちはユーザビリティではなくオシャレ重視。

視覚効果(演出)のためのアニメーションはひと昔前はフラッシュという技術を利用して行われるのが一般的でしたが、昨今ではCSSやJavaScriptを組み合わせることによってかなり高度なアニメーションが行われるようになってきました。パララックスデザインとかがこれにあたると思います。もう古いのかな?

これに関してはユーザーアクションに対してというよりは、時間軸に沿って順番にアニメーションを実行するような形式になります。ストーリーを考える必要があるので、デザイナーさんの腕の見せ所なんじゃないでしょうか。私はそんなスキルは持ち合わせていません。

こっちはあまり知見がないのでこんなところでおわり。

CSSでアニメーションを行うための2つのプロパティ

CSSでアニメーションを行うには、transitionanimationという2つのプロパティを利用することになります。どちらもIE10から使えるはずなので、そろそろ本格的に利用する機会が増えてくるやつだと思います。

transitionに比べるとanimationの方が指定項目が多いので複雑なアニメーションができるのかな、と最初は思っていましたがそうではないようです。

言葉で説明するのは難しいのですが、transitionはインタラクションに対して反応するアニメーションを指定して、animationは時間軸に沿ってあらかじめ決められているアニメーションを指定できる、といった使い分けができそうです。

もう一つの違いとして、transitionプロパティを使った場合はユーザーインタラクションに反応するので、状態A→状態Bへと1回のインタラクションに対して1回のアニメーションが行われます。

これに対して、animationプロパティを使った場合はインタラクションではなく時間軸でのアニメーションなのでスタートからゴールまでアニメーションが終わるとそこで終了とすることもできますし、再度スタートから再生することもできます。再生回数を指定するこもできますし、無限にループさせることもできます。

さいごに

基礎のおさらい完了。次は実際に2つのプロパティの使いかたと簡単なサンプルを作って理解を深めたいと思います。どちらかというと、transitionプロパティの方が興味ありです。

ではでは、最後までお付き合いいただきありがとうございました。