これは便利！Animate.cssをSassで使う方法

はじめまして。京都の会社でフロントエンドエンジニアなどをしている田路と申します。

このたび、縁あってLIGブログに記事を書かせていただくことになりました。どうぞ、よろしくお願いいたします。

さて、早速ですが今回はAnimate.cssをSassで使用する方法を紹介していきたいと思います。

Animate.cssとは？

Animate.cssは、読み込んでさえいれば、要素にクラスをつけるだけでさまざまなアニメーションを実装してくれるという便利なスタイルシートのライブラリです。

使用方法

まずはこちらからダウンロードしてください。

ファイル名、拡張子をanimate.scssとすることで、partial機能を利用し、簡単にSassでも利用することが可能になります。

• animate.css　→　_animate.scss

ただし「3秒かけてアニメーションさせたい」や「アニメーションの開始を遅延させたい」など、アニメーションの細かい設定や任意のクラスにアニメーションを実装することはできません。

でも、Sassを使っていれば大丈夫です。mixinしましょう。

mixin化

さくっとやってしまいたいので、GitHubで公開されているソースを使いましょう。

使用方法

今回使わせてもらったのはgeoffgraham/animate.scssです。

この中で必要なものは以下のとおりです。

• _attention
• _bouncing-entrances
• _bouncing-exits
• _fading-entrances
• _fading-exits
• _flippers
• _lightspeed
• _rotating-entrances
• _rotating-exits
• _sliders
• _specials
• _zooming-entrances
• _zooming-exits
• _properties.scss
• animate.scss

フォルダにそれぞれのアニメーションを定義したものが入っており、それをproperties.scssとanimate.scssを通じて使うといったイメージでしょうか。

読み込むファイルはanimate.scssのみです。
普通にImportすると、上記のscssがすべてcssにコンパイルされてしまうので、cssファイルに変換したくない場合はpartialで読み込めばOKです。

sass

/******* sass *******/
@import "animate/animate"

scss

/******* scss *******/
@import "animate/animate";

これでinclude○○○でアニメーションが使えるようになります。

また、引数で以下の設定ができるようになります。

• $duration：
  1回のアニメーション周期が完了するまでの所要時間（デフォルト値 1s）
• $delay：
  アニメーションをいつ開始するか（デフォルト値 2s）
• $function：
  アニメーション中に一次元の値がどれだけ速く変化するかを表す数学関数（デフォルト値 ease）
• $fill-mode：
  アニメーションの実行前や実行後にどのようなスタイルを適用するか（デフォルト値 both）

サンプル

以下、サンプルを2つ紹介します。

任意のクラスをもつ要素をアニメーションさせる

sass

/******* sass *******/
.button
  width : 150px
  margin : 0 auto 50px
  padding : 1.5em 0
  text-align : center
  color : white
  background : gray
  cursor : pointer
  border-radius : 5px
  &:hover
    +wobble()

scss

/******* scss *******/
.button{
  width : 150px;
  margin : 0 auto 50px;
  padding : 1.5em 0;
  text-align : center;
  color : white;
  background : gray;
  cursor : pointer;
  border-radius : 5px;
}
.button:hover{
  @include wobble();
}

サンプル1

開始時間を1秒遅延させ、3秒かけてアニメーションさせる

sass

/******* sass *******/
.button
  width : 150px
  margin : 0 auto 50px
  padding : 1.5em 0
  text-align : center
  color : white
  background : gray
  cursor : pointer
  border-radius : 5px
  &:hover
    +wobble()

scss

/******* scss *******/
.button{
  width : 150px;
  margin : 0 auto 50px;
  padding : 1.5em 0;
  text-align : center;
  color : white;
  background : gray;
  cursor : pointer;
  border-radius : 5px;
}
.button:hover{
  @include wobble();
}

サンプル2

まとめ

いかがでしたでしょうか。

同じアニメーションでも、所要時間や開始のタイミングなどを変更することで、デザインに合わせたアニメーションができるようになると思います。

ぜひ試してみてください。それでは！