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

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

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

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

> **[自作サンプルページ]**
> http://nekoneko-wanwan.github.io/demo/animate-sass/
>
> (イメージ)
> ![Demo-page.png](https://qiita-image-store.s3.amazonaws.com/0/58436/4be8b874-e524-34f1-7070-0e787ceb756f.png)




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

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





#目次
- animate.scssの強み
- animate.scssの弱み
- 導入方法
- 導入時の注意事項
- mixinの使い方
- 終わりに





#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](https://github.com/daneden/animate.css)や[自作サンプルページ](http://nekoneko-wanwan.github.io/demo/animate-sass/)をご覧ください
- 引数に以下変数を渡すことで、細かい動作をカスタマイズすることができます
- 引数を渡さない項目は、デフォルト値（_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
もっと使いやすいものがあればぜひ教えてください！