CSSアニメーションの基礎知識

改めてCSSアニメーションとは

2011年6月にFirefox5がCSSアニメーションに対応したことを皮切りに、GoogleChrome、Safari、iOS、Androidなど次々に各ブラウザがCSSアニメーションに対応するようになりました。CSSアニメーションを利用することによって自由度の高い動きを表現できるようになり、Webデザインに一役買っています。

CSSアニメーションのメリット

  • ほとんどのスマホがCSSアニメーションに対応しているので、モバイル・デザインにも活用できる
  • 初心者にとってJavaScriptに比べると分かり易いコード
  • 動作がスムーズ

CSSアニメーションのデメリット

  • jQueryなどの利用に比べると、コード量が増える
  • アニメーション要素（プロパティ）が限定的

CSSアニメーションのプロパティ3分類

transform／傾けたり拡大
transition／時間と共に状態が変わる
animation／時間による変化、繰り返し再生など細かいアニメーション設定が可能
一言でCSSアニメーションといっても、やり方は上記のとおりいくつかあります。

それぞれのプロパティによって、実行できるアニメーションに違いがありますので、これからご紹介するサンプルを見ていく上で知っておく必要があります。3つの違いをイメージしやすいようにアニメーションのサンプルを作ってみましたので、ご参考下さい。
transform/transition/animation

CSS学習にはこちらも合わせてご覧頂くと効果的です。

CSSアニメーションのブラウザ対応

CSSアニメーションの各プロパティが起動するブラウザは以下の通りになります。

  • transform（2D）

    • Chrome、Safari 3.1 以上
    • Firefox 3.5 以上、Opera 10.5 以上
    • IE 9 以上、Android 4.1 以上、iOS 4 以上

  • transition

    • Chrome、Safari、Firefox 4 以上
    • Opera 10.5 以上、IE 9 以上
    • Android 2.1 以上、iOS 3.2 以上

  • animation

    • Chrome 6 以上、Safari 5 以上、Firefox 5 以上
    • Opera 12 以上、IE 10 以上
    • Android 4.4 以上、iOS 4 以上

CSSアニメーション20選

Appleのカンファレンス・ロゴ2015にアニメーション

年に一度を開催されるAppleのデベロッパー・カンファレンス「WWDC」のロゴにアニメーションを加えたモノになります。実際のアニメーション・コーディングについてはcssanimation.rocks
年に一度を開催される Apple のデベロッパー・カンファレンス「WWDC」のロゴにアニメーションを加えたモノになります。実際のアニメーション・コーディングについてはこちらで指南されています。

JavaScriptアニメをCSSアニメで表現

それをあえて CSS アニメーションで同様の動きを表現している例になります。ちなみにエドワードさんは、20世紀初めに誕生したイギリス出身の有名な写真家です。

スーパーマリオ3D

今年で30周年を迎えるスーパーマリオをCSSだけで表現したモノになります。cordobo.com
今年で30周年を迎えるスーパーマリオをCSSだけで表現したモノになります。CSSコードを見てみると、開発者のソウルを感じられると思います。

キュートなショッピング・アイコン

CODEPEN／JoniTrythallさん
カート・アイコンをクリック（タップ）すると、買い物カゴに商品が入っていくアニメーションになります。SVGのデザイン・パーツをうまく使って、美しいアニメーションを表現しています。ECサイト・デザインで参考にできそうですね。

ホバーエフェクト3種盛り

WebdesignerDepot.com内のDEMO1のCSSeffect要素をちょっといじってみると、CSSアニメーション初心者の方でもイメージがわきやすいと思います。
試しに右上ではなく真上にスライドするように変更してみましたので、こちらをご参照ください。PC でご覧の方は、ページのソースを表示してみて、元の CSS コードと比べて見て下さい。

プロフィール写真もアニメーション

CODEPEN／JaschaGoltermannさん
コーポレート・サイトなどでよく見かけるメンバーの写真も、CSSアニメーションを使うと一風変わったように見えます。こちらのサンプルは、背景色を変えるgradientsプロパティとanimationプロパティをうまく組み合わせた例になります。

サインをCSSでアニメーション


damian.drygiel.com/
WebデベロッパーDamianDrygielさんのWebページの最後にかっこいいサイン・アニメーションがありましたのでご紹介します。CSSアニメーションの@keyframesと背景画像をうまく使って、サイン・アニメーションを表現しています。
サインの画像は、おそらく動画の画像キャプチャを Photoshop もしくは Illustrator などの画像ソフトで編集したものではないかと推測します。SVG アニメーションを使ったサイン・アニメもステキですが、このテクニックも面白いですね。

消去してもいいですか？のボタン

CODEPEN／HakimElHattabさん
Webでページを離れる時やソフトを消去する時に現れる「確認ボタン」ですが、CSSアニメーションとJavaScriptを駆使すると目障りにならない美しいポップ表示へと様変わりします。CSSアニメーションのtransforms（3D）とtransitionプロパティをうまくかけ合わせている点は参考になります。

写真集がクルクル回転するアニメーション

THEARTOFWEB
ページ中段のセクション4ぐらいから登場する回転写真はユニークです。CSStransformsのrotateメソッドを使って、写真の回転制御をおこなっています。

曲線がステキなドロワ―メニュー

モバイルにも役に立ちそうなCSSアニメーションを使った、ドロワ―メニューのサンプルになります。CSSアニメーションとJavaScriptをうまく使った好例です。CODEPEN／NikolayTalanovさん
モバイルにも役に立ちそうなCSSアニメーションを使った、ドロワ―メニューのサンプルになります。CSSアニメーションとJavaScriptをうまく使った好例です。

JavaScriptを使わないドロワ―メニュー・CSSコード集

PureDrawer
JavaScriptを使わずに、CSSで14種類のドロワ―メニューを紹介しているサイトになります。

ソースはGitHub上に公開されていて、ダウンロードすることも可能です（MITライセンス）。Webデザインをはじめ、モバイルデザインにも活かせそうなプロダクトばかりです。

ページがめくられる本の様子

モコモコ感抜群のクラウド・アニメーション

CSS3DClouds
雲のモコモコした感じをCSSとJavaScriptで表現したサンプルになります。スマホでもモコモコ感を味わうことができるユニークなデザインです。CSSコードは、ページのソースを表示するとstyle形式で記述されています。

写真を縦スライスしたphoto演出

Codrops／上記アニメーションの作り方
ユニークな Web デザインを次々とリリースする Codrops で公開されている CSS アニメーション例です。1 枚の写真を 4 分割し、CSS animation の slideOutUp や transition の opacity ease-in-out などが与えられています。

デモの写真は、幅 600 px なので 150 px ずつに 4 等分区切って、nth-child() セレクターで要素指定されています。様々なプロパティが使われているので、CSS 初心者にとっては良い教材になるのではないでしょうか。

CSSでフィルター機能を装備

Codrops
よくJavaScriptで実装されるフィルター機能も、CSSで同じような表現をすることができます。チョット手間かもしれませんが、セレクタでコツコツ指定すれば実装できます。こちらのデモ・サイトでは、画像にマウスオンした時の背景アニメーションもCSSでコーディングされています。

CSSシェイプ+アニメーション

ポスターをステキに演出するアニメ―ション

Macofolio
HTML4のバージョンでCSSアニメーションを実装している例になります。動きはシンプルですが、幅広いジャンルで使えそうな動きです。

プライスカードをアニメーション


自作
CODEPENで紹介されているコードを元に、限定特価のプライスカード・アニメーションを作ってみました。単純な動きですが、消費者の目を引く？かなと思います。HTMLシート1枚にまとめていますので、よろしければご参照ください。

“ビヨーン”と画像や文字を演出できるアニメーション集

CSS3AnimationCheatSheet
フェードインやプルアップなど代表的なアニメーション18種類を紹介するサイトで、animation.cssをインストールすることで、CSSアニメーションに詳しくなくても紹介されている機能を簡単に実装することができます。

ボタンのホバー・ア二メ―ション集

Hover.css
Webサイトの「ボタン」にちょっとしたアニメーション要素を加えると、ぐっとページ全体のデザイン・レベルが上がりますよね。そんなボタン・アニメーションを CSS で実装できるソース集になります。かわいい系からモダン形まで 100 種類以上のサンプルが用意されています。

まとめ

思ったよりもCSSで表現できるアニメーションの種類の多さに驚かれた方もいらっしゃるのではないでしょうか？ちょっとCSSアニメーションについて興味がわいた方は、CODEPENやCSSDeskなどのCSSサイトを覗いて見ると、もっとおもしろいアニメーションが見つかるかもしれません。

またGoogleから提供されているアニメーションの資料（英語）も参考になると思います。
CSS 初心者でも、まずはコードのコピペから始めて見ると、アニメーション設定の感覚を早くつかめると思いますよ。

プログラミング初心者の方にはこちらも人気です！