MD-Blog_Web Creative

CSS3 アニメーションを使ったWebサイトが増えてきました。サイトにちょっとしたアニメーションを付けるだけで、目を引くWebサイトになります。

今回は、SassとBourbonを使ってCSS3 アニメーションを作りたいと思います。
SassとBourbonを使うと、簡単にCSS3のアニメーションを作ることができるんです！

CSSのみでアニメーションを実装

例えば、opacityを0から1にするアニメーションを1秒で実行するアニメーションを作りたいと思います。

Sassを使わず、CSSのアニメーションを記述する場合は下記の通りです。

    .fadeIn {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

Sassを使わずCSSのみでアニメーションを記述すると、アニメーションの名前や時間、回数を指定する必要があります。ベンダープレフィックスの記述も考えると、簡単なアニメーションを実装するためにこれだけのCSSを書くのは億劫です。

さらに、1パターンだけでなく、何通りものアニメーションを作るとなると、都度、このコードを書くのは時間がかかる作業になります。

そこで使うのは、Sass（scss）とBourbonというmixin集です。

Bourbonとは

Bourbonは、便利なmixinが詰まったライブラリ。最近ではCompassよりBourbonを利用してSassを書くことが多くなりました。導入もしやすく、Compassと違ってmixinをimportするだけなのでコンパイルも速いです。

positionをまとめて指定したり、グラデーションを指定したりするmixinが豊富に揃ってます。

Bourbonは、導入方法も簡単です。
Bourbonのmixin集をダウンロードして、Sassにimportするだけ。
導入方法やmixinの詳細については、公式ページに詳細が載ってるので、詳しく知りたい方はこちらを見てみてください。

SassとBourbonアニメーションを指定

先程も書きましたが、BourbonにはCSS3のアニメーションを扱うためのmixinが色々と用意されています。Bourbonのmixinを利用すると、ベンダープレフィックスを補完したCSSコードをコンパイルしてくれます。

今回、アニメーションに利用するmixinはこちら！

animationプロパティ

animationプロパティを使って、キーフレームアニメーションの設定ができます。animationプロパティを利用してアニメーションを行うためには、プロパティとは別にキーフレームを作成する必要があります。

animation-name

キーフレーム名を指定します。キーフレームでアニメーションを指定する場合は、この指定が必要です。

animation-duration

アニメーションの再生時間を指定します。

animation-iteration-count

アニメーションを繰り返す回数を指定することができます。

animation-delay

アニメーションのディレイ（再生開始時間を遅らせる）を指定します。

animation-timing-function

イージングを指定することができます。Bourbonにも豊富に用意されてるので、これを利用すると便利。

animation-fill-mode

アニメーション中と再生後の表示の指定をすることができます。「web帳」というブログの記事がとても分かりやすく、参考になるかと思います。

keyframe

キーフレームアニメーションの設定を行います。
Flashのタイムラインアニメーションと似たようなイメージでアニメーションの指定ができます。

    @include keyframes(アニメーションの名前) {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1:
        }
    }

まとめて指定する

Bourbonのmixinを利用して、アニメーションの指定をまとめるmixinを作りました。
まずは以下のmixinをSassに書きます。
Bourbonがimportされていないとエラーが出ますのでご注意を。

    // アニメーションをセットするためのmixin
    @mixin setAnimation($name: fadeIn, $duration: 1s, $delay: 0s, $easing: $ease-in-quad, $count: infinite, $mode: none) {
      @include animation-timing-function($easing);
      @include animation-duration($duration);
      @include animation-iteration-count($count);
      @include animation-delay($delay);
      @include animation-name($name);
      @include animation-fill-mode($mode);
    }

    // fadeInのキーフレーム
    @include keyframes(fadeIn) {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    // fadeInのアニメーションをセット
    .fadeIn {
      @include setAnimation($name: fadeIn, $duration: 1s, $count: 1);
    }

このサンプルにある引数を説明しましょう。

$name

アニメーションの名前を指定。指定がなければ、fadeInのアニメーションを行います。

$duration

アニメーションの再生時間を設定。指定が無ければ、再生時間が1秒のアニメーションを行います。

$delay

アニメーションの再生開始時間を指定します。指定が無ければ、ディレイなしでアニメーションが実行されます。

$easing

イージングを指定します。指定が無ければ、Bourbonのイージングの$ease-in-quadを利用したアニメーションを行います。

$count

アニメーションを何回実行するかを指定します。指定が無ければ、1度だけアニメーションを行います。

$mode

アニメーション後の表示の指定をすることが出来ます。指定が無ければ、アニメーション前の状態に戻ります。

それでは、setAnimationのmixinを利用して、アニメーションをセットしてみます。
プロパティの指定は次の通り。

• 不透明度が0になるアニメーション
• 2秒で実行
• 1秒遅らせてアニメーション
• アニメーションの回数を1回

まずは、keyframesを指定します。

    @include keyframes(fadeOut) {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }

次に、setAnimationのmixinにプロパティを指定して、投げます。

    .fadeOut {
        @include setAnimation($name: fadeOut, $duration: 1s, $delay: 2s, $count: 1);
    }

キーフレームアニメーションを用意すれば、mixinに投げるだけで簡単にCSS3のアニメーションを作ることができます。自分のオリジナルのキーフレームアニメーションを作って、アニメーションを実行してみましょう！

アニメーションサンプル

何個かアニメーションのサンプルを用意してみました。

サンプル1) 右回転するアニメーション

    @include keyframes(rotateR) {
      0% {
        @include transform(rotate(-360deg));
      }
      100% {
        @include transform(rotate(0deg));
      }
    }

    .rotateR {
      @include setAnimation($name: rotateR, $duration: 1s, $easing: linear);
    }

サンプル2) 右に2回転して、止まるアニメーション

    @include keyframes(rotate) {
      0% {
        @include transform(rotate(-360deg));
      }
      60% {
        @include transform(rotate(360deg));
      }
      100% {
        @include transform(rotate(360deg));
      }
    }

    .rotate {
      @include setAnimation($name: rotate, $duration: 1s, $easing: linear, $count: infinite);
    }

サンプル3) 複数のアニメーションをまとめて実行する

    @include keyframes(fadeOut) {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    @include keyframes(rotateR) {
      0% {
        @include transform(rotate(-360deg));
      }
      100% {
        @include transform(rotate(0deg));
      }
    }

    .rotateFadeOut {
      $animationMix: rotateR, fadeOut;
      @include setAnimation($name: $animationMix, $duration: 2s, $easing: linear, $count: infinite);
    }

これらのサンプルは以下のURLに設置しています。
何かの参考になれば幸いです。

• CSSサンプル
• Sassサンプル

まとめ

BourbonとSassを利用するとCSS3 アニメーションを簡単に実装することができます。Sassのfor文など使うことによって、同じアニメーションでもパターンが違うものを簡単に作れる！

CSS3 アニメーションは、作っていて楽しいですね。みなさんもお気に入りのアニメーションを作ってみてください！