CSS animationの効率の良い書き方とソースの整理方法

CSSのanimationプロパティは便利だし表現力豊かなのですが、どうしてもコードが長くなりがちですよね。

効率的でスマートなCSS animationの書き方をご紹介します。

なにか特別な技術や表現ということではなく、コードの整理方法です。

特に、アニメーションの種類が多い場合や、速度やタイミングが違うアニメーションを沢山使いたい場合には便利な書き方だと思います。

animationのCSSは別ファイルにする

とにかくまずanimationの記述は別のCSSファイルにした方が良いでしょう。

もちろんサイト全体のCSS設計にもよりますが、先ほどの通り、多くのアニメーションを設定していく場合には独立したファイルにまとめた方がコードが綺麗ですし、後々使いまわしもしやすくなります。

animationのCSSを読み込ませる方法3種

別ファイルにしたanimationのCSSは次の方法で読み込むと良いでしょう。
(※仮にanimation.cssというファイルとします)

■animation.cssを使うページにだけ読み込ませる。

/*通常のCSS読み込み*/
<link rel="stylesheet" type="text/css" href="animation.css">

■インクルードファイルにまとめて読み込ませる。

<!-- インクルードしたhtml(shtml)の中でCSSを読み込ませる -->
<!--#include virtual="/common/commonStylesheet.shtml" -->

■CSSファイルにCSSファイルを読み込ませる。

/*CSSの中で別のCSSを読み込ませる記述*/
@import "animation.css";

状況に応じて読み込ませ方を変えていけるので、やはり一つのCSSにまとめるのは効率的です。他のサイトにも使いまわしがしやすいですからね。

キーフレームとそれ以外を別のclass指定にする

ここからが本題です。次のことが肝心になります。

こうすることで、同じアニメーションであっても、後からclassを追加するだけで無限ループにしたり、スピードを変えたりとCSSの記述を追加せずにclassの付与だけで実装できるからです。

具体的には次のようになります。

アニメーションの動きの指定(キーフレーム)

/* ここから */
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
/*ここまでで1つのアニメーション(動き)*/

上の記述で1つのアニメーション(動き)の設定です。
あくまでfrom(0%)からto(100%)までの動きだけの指定だけです。

名称をslideInUpとしていますが、この要領で他にも沢山アニメーションを作ります。
slideInLeftにして左から出てくるようにしたり、
・bound(バウンド)系
・zoom(ズーム)系
・roll(ロール)系
など何でも作って入れておきます。

ただ、この記述だけでは実際には動かないので、
次にアニメーションの他の設定を別のclassに当てこんでいきます。

アニメーションのその他の設定(時間指定やループなど)

アニメーションが実際に動くにはanimation-durationプロパティの設定が必要です。

初期値では0になっているので、これをanimation-duration:1s;にすると1秒かけて指定した動きをします。

このような設定を別々のclassに指定していきます。
具体的には以下のようになります。

/*.animated:動きの発火になるclass*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*.infinite:無限ループにするclass*/
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
/*..delay-1s:動くまでのディレイ指定class 1s～5sぐらいまで作っておくと良い*/
.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
/*.fast:ちょっと早く動かすclass*/
.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}
/*.slow:ちょっと遅く動かすclass*/
.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

このclassを実際に使うとしたら次のようになります。

<!-- 例1:slideInUpの動きを無限に繰り返す -->
<div class="slideInUp animated infinite">
</div>

<!-- 例2:slideInUpの動きを1秒ディレイさせてちょっと早く動かす -->
<div class="slideInUp animated delay-1s fast">
</div>

classの組み合わせでアニメーションをコントロールします。

JSでのコントロールにも便利

先ほどの例で言うと、.animatedというclassが付与されると実際にアニメーションが動きます。

そのため、JavaScriptで「オブジェクトが画面内に現れたらclass=”animated”とアニメーションの種類のclassを付与する」というスクリプトを作れば、スクロールして画面に現れたらアニメーションする機能が作れます。

これについては以下の記事で詳しく解説しています。

沢山のアニメーションパターンを作る場合には非常に効率的な書き方になると思います。ぜひお試しください。