[Sass, mixin, css3, animation, keyframes]Sassでanimationプロパティを効率化するよ！

上記のように、まずは@keyframesでアニメーションtestの定義を行ってクラスhoge01にanimation-name(test)で渡しています。
※プレフィックスがたくさんあって見辛いですが、ここでは無視してください。
※animation-durationは次で紹介。

ではここでanimationプロパティ関連の他のプロパティを見てみましょう。

animation関連プロパティ

animation-name

@keyframesで定義した任意の名前を指定します。

animation-duration

アニメーションを実行する時間の長さを「*s」で指定します。
これを指定しないと0sと同じでアニメーションは見れません。

animation-timing-function

アニメーションのタイミングを指定します。

• ease　開始と完了が滑らかに（初期値）
• ease-in　ゆっくり始まる
• ease-out　ゆっくり終わる
• ease-in-out　ゆっくり始まりゆっくり終わる
• linear　一定

animation-delay

アニメーションがいつ始まるかを「*s」で指定します。指定しないと、すぐに実行されます。

animation-iteration-count

アニメーションを繰り返す回数を指定します。
無限ループはinfiniteを指定します。

animation-direction

animation-iteration-countを指定した時のアニメーションを繰り返す方向を指定します。

• normal…通常の方向（初期値）
• alternate…奇数回で通常方向、偶数回で逆方向
• reverse…逆方向
• alternate-reverse…alternateの逆方向

animation-play-state

runningを指定するとアニメーションが再生されます。（初期値）
pausedを指定するとアニメーションを停止できます。
jqueryなんか使って再生、停止するのに使えそうですね。

animation-fill-mode

アニメーション再生前後の状態を指定します。

• none…何もしません（初期値）
• forwards…再生後に最後のキーフレーム(100%)の状態
• backwards…再生前に最初のキーフレーム(0%)の状態
• both…forwardsとbackwardsの両方

上記のプロパティをまとめて指定する場合はanimationプロパティにスペースで区切って指定します。
順番は以下の通り。

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

ここからが本題です。

このanimationプロパティ使ってみると面白いんですが、ベンダープレフィックスじゃ色んなプロパティじゃって1つのアニメーションを作るのに結構な記述量になっちゃいます。
結果めんどくせって諦めちゃうこともあると思うんです。
しかし、ここはSassにお任せ！ってことで、複数のアニメーションを管理する@mixin、@contentを使ってアニメーションにチャレンジしたいと思います。

まずはデモからご覧ください。

• hoge01…2秒後にスタート。5色徐々に変更。alternateでくり返し。
• hoge02…2秒後のスタート。2色徐々に変更。alternateでくり返し。
• hoge03…2秒後にスタート。文字サイズを徐々に変更。alternateでくり返し。

@mixinと@contentでkeyframesを用意

@mixin keyframe($name) {
    @-webkit-keyframe $name {
        @content;
    }
    @-moz-keyframe $name {
        @content;
    }
    @keyframe $name {
        @content;
    }
}

これがデモ3つのアニメーションの土台部分になります。

@mixinでanimationプロパティも用意

@mixin animation($name) {
    -webkit-animation: $name;
    -moz-animation: $name;
    animation: $name;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    animation-direction: alternate;
}

ここをどう書くかで後々どこまで楽になるか決まってきます。

hoge01～hoge03のでものアニメーションを確認してみると

• hoge01…2秒後にスタート。5色徐々に変更。alternateでくり返し。
• hoge02…2秒後のスタート。2色徐々に変更。alternateでくり返し。
• hoge03…2秒後にスタート。文字サイズを徐々に変更。alternateでくり返し。

上記のように共通の部分があるのが分かります。
「2秒後にスタート」「alternateでくり返し」がどれも共通です。
なのでここで@mixinにまとめて書いちゃうんです。
本来なら3つのアニメーションを作るとしたら3回同じことを書かなければならないことを@mixinにすることで1回済みます。

実際にアニメーションを書く

.hoge01 {
    @include animation(anime01 5s);
}
.hoge02 {
    @include animation(anime02 3s);
}
.hoge03 {
    @include animation(anime03 3s);
}

実際の3つのアニメーションはシンプルなコードで済みますね。
アニメーションが増えても楽勝ですね。

hoge03だけプロパティを増やしたい場合でも

.hoge03 {
    @include animation(anime03 linear 3s); //animation-timing-function:linear追加
}

という具合に追加してあげればいいですね。

まとめ

いかがだしたでしょうか。
@mixinでanimationを管理する方法。
うまくつかえば比較的簡単、楽にアニメーションに実装ができそうです。