はじめに

animate.cssは色々なcssアニメーションを簡単に導入できるライブラリです。あらかじめ決まったclass名をhtml要素に付与することで、高品質で面白いアニメーションが再現できます。

そんなanimate.cssをSass版として移植し、より柔軟に使えるようにしたanimate.scssというライブラリを見つけました。既にSass(Scss)ベースでの開発が主となっている自分にとって、これは便利そうだと思い使い方などをメモしました。何かの参考になれば幸いです。

なおanimate.cssをきちんと使ったことが無かったため、アニメーションの動作が分かるサンプルページを作りました。

[自作サンプルページ]
http://nekoneko-wanwan.github.io/demo/animate-sass/

(イメージ)

注意事項!!

おそらくanimate.cssベースのSassライブラリは、他にも同じような名前で存在していると思います。
ここでの animate.scss は以下作者様のライブラリを想定しています。ご注意ください。

http://geoffgraham.me/animate-scss/
https://github.com/geoffgraham/animate.scss

animate.scssの強み

animate.cssの移植版なため、学習コストが低い
mixinとして用意されているため、html(class名)を気にせず好きに使える
mixinの引数により、アニメーションの細かいカスタマイズができる
依存関係はないため、既存スタイルにも直ぐに組み込める
全種類のアニメーションを一括で読み込むことも、個別に取捨選択することも簡単

animate.scssの弱み

ベンダープレフィックスの設定が_properties.scssにベタ書きされているので、手動での調整が必要なことも
animate.cssとは作者が異なるため、最新状態が反映されない可能性がある

導入の手順

Github（https://github.com/geoffgraham/animate.scss ）よりファイルをダウンロードしてきます
必要なファイル群をプロジェクトの適当なフォルダへ格納します
- animate.scss, _properties.scss, _animation_dir/*
使いたいSassファイル内でフレームワークを読み込みます

一括読み込み.scss

@import "PROJECT_DIR/animate";  // この中に個別読み込みが全て指定されている

個別読み込み.scss

// 必須
@import "PROJECT_DIR/_properties";

// ※ファイル名の先頭には_を付けてpartial化（後述）
@import "PROJECT_DIR/_attention-seekers/_attention-seekers.scss";
@import "PROJECT_DIR/_bouncing-entrances/_bouncing-entrances.scss";
@import "PROJECT_DIR/_bouncing-exits/_bouncing-exits.scss";
@import "PROJECT_DIR/_fading-entrances/_fading-entrances.scss";
@import "PROJECT_DIR/_fading-exits/_fading-exits.scss";
@import "PROJECT_DIR/_flippers/_flippers.scss";
@import "PROJECT_DIR/_lightspeed/_lightspeed.scss";
@import "PROJECT_DIR/_rotating-entrances/_rotating-entrances.scss";
@import "PROJECT_DIR/_rotating-exits/_rotating-exits.scss";
@import "PROJECT_DIR/_sliding-entrances/_sliding-entrances.scss";
@import "PROJECT_DIR/_sliding-exits/_sliding-exits.scss";
@import "PROJECT_DIR/_specials/_specials.scss";
@import "PROJECT_DIR/_zooming-entrances/_zooming-entrances.scss";
@import "PROJECT_DIR/_zooming-exits/_zooming-exits.scss";

読み込んだ時点で@keyframesが生成されるため、一括で読み込むとかなりの量となります。個別に読み込み必要に応じて調整する方が良いかもしれません。

またBowerにもあるようなので、そこからインストールしても良いかと思います
$ bower install animatewithsass
https://libraries.io/bower/animatewithsass

導入時の注意事項

Partial化されていない

一括読み込み用のanimate.scssおよび各アニメーション読み込み用の*.scssファイル（各ディレクトリ以下に格納）は、接頭辞に _ が付いておらずPartial化されていません。そのためコンパイルすると、不要なcssも合わせて出力されていまいます（コンパイルの設定で制御できるかもしれませんが）。

私の場合それだと困ったので、以下のようなシェルスクリプトを書いて全scssファイルの接頭辞に _ をつけた名前に一括置換しました。

add_underbar_prefix.sh

#!/bin/bash

# _で始まらないscssファイル
for file in `find . -type f ! -name "_*" -and -name "*.scss"`
do
# echo 'allName: '  $file
# echo 'dirName: '  ${file%/*}
# echo 'fileName: ' ${file##*/}
mv $file ${file%/*}/_${file##*/}
done

$ sh add_underbar_prefix.sh

PROJECT_DIR/animate.scss
PROJECT_DIR/_attention-seekers/attention-seekers.scss
...
↓
PROJECT_DIR/_animate.scss
PROJECT_DIR/_attention-seekers/_attention-seekers.scss
...

renameコマンドが使えない環境だったのでスクリプトを書きました。。。

シェルスクリプトはほとんど書いたことがないので、動作の保証はできません

何かおかしい箇所があればぜひご指摘ください m(__)m

mixinの使い方

設定したい要素に対して、@include ANIMATION_NAME(args); と指定するだけです
指定できるアニメーション名は、animate.cssのものと同じになります
- animate.cssのGithubや自作サンプルページをご覧ください
引数に以下変数を渡すことで、細かい動作をカスタマイズすることができます
引数を渡さない項目は、デフォルト値（_properties.scssで定義）が設定されます

引数なしサンプル.scss

.hoge {
  @include bounce();
}

引数ありサンプル.scss

.hoge {
  @include bounce(
    $duration: 0.3s,
    $count: infinite,
    $delay: 1s,
    $fill: both,  // animation-fill-mode
    $visibility: hidden  // backface-visibility
  );
}

終わりに

これでリッチな表現も簡単ですネ( * ^ -^)b
もっと使いやすいものがあればぜひ教えてください！

Sass版animate.cssで簡単・便利に高品質アニメーションを実装する