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

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





全国1000万人のanemationファンのみなさまこんにちは!
好きなアニメはサイコパスとか攻殻機動隊とかカウボーイビバップのcssオタク(アニヲタ否定)のクールでシャイなアンチクショー下山です。

とうとうanimationプロパティに手を出してしまいました。
今は必要性かなり低いですが(ボクがやる案件では)一応メモっておきます。

まずは基本からです。

animationプロパティ

animationとは要素を徐々に変化させるプロパティです!
徐々に変化させるためにはキーフレーム(@keyframes)を使って細かく変化を指定していきます。
CSSだけで全てを指定できるので、CSSバカにはたまらないプロパティなんだねっ!

キーフレーム(@keyframes)

アニメーションの通過点のことで、変化の中間地点、最終点とでも言いましょうか。アニメーションがどう変化していくかを定義したフレームのことです。
@keyframesとanimation-nameプロパティをセットで使用します。
animation-nameプロパティは、そのアニメーションに任意の名前を付け、その名前をanimationプロパティで呼び出してある要素をアニメーションさせます。

※右下の「RERUN」をクリックしてみてください。

See the Pen animation#01 by mitsuki sagayama (@sagayama) on CodePen.

上記のように、まずは@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を管理する方法。
うまくつかえば比較的簡単、楽にアニメーションに実装ができそうです。

タイトルとURLをコピーしました