本文へジャンプ

SassとBourbonでCSS3アニメーションを作る

Posted by MD

SassとBourbonでCSS3アニメーションを作る

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に設置しています。
何かの参考になれば幸いです。

まとめ

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

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

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+