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

田路竜士

2014.11.26

Web制作

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

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

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

Animate.cssとは？

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

使用方法

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

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

animate.css　→　_animate.scss

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

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

mixin化

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

使用方法

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

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

animateフォルダ
animate.scss

これをpartialで読み込みます。

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

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

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

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

また、以下のような記述を足すとアニメーションの設定を変更できます。

@include animation-duration(1s):
1回のアニメーション周期が完了するまでの所要時間（デフォルト値 1s）
@include animation-delay(0.2s):
アニメーションをいつ開始するか（デフォルト値 2s）
@include animation-timing-function(ease)：
アニメーション中に一次元の値がどれだけ速く変化するかを表す数学関数（デフォルト値 ease）
@include animation-fill-mode(both)：
アニメーションの実行前や実行後にどのようなスタイルを適用するか（デフォルト値 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
    +animation(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 animation(wobble);
}

サンプル1

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

sass

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

scss

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

サンプル2

※11/27 一部内容に誤りがありました。お詫びして修正させていただきます。