CSS3アニメーション：伸びる棒グラフ

サンプルはこちら。

イケてる風なインフォグラフィックでよく見る、伸びるアクションをする棒グラフのサンプル。

HTML

<div class="barchart">
  <div class="date1" style="width:60%"></div>
  <div class="date2" style="width:40%"></div>
  <div class="date3" style="width:80%"></div>
</div>

データごとにインラインCSSで幅を指定しているのがポイントです。

外部CSSファイルをプログラムで書き換えるのは何かと手間が発生するため、HTML側に直接長さのみ出力する形が動的に見せるには好ましいです。

CSS(Sass)

.barchart {
  width: 300px;
  margin: 0 auto;
  border: solid 5px #ccc;
}
[class*=date] {
  height: 20px;
  margin: 10px 0;
  background: #ccc;
  @include animation( anime1 1s 1 ease);
}
.date1 {background: #0c9}
.date2 {background: #09c}
.date3 {background: #0cc}
@-webkit-keyframes anime1 {
  0% {width: 0px;}
}
@keyframes anime1 { //IE用
  0% {width: 0px;}
}

6行目で、クラス名が「date」で始まる要素を対象にスタイルを設定していますが、ここにSassのmixinでanimationを記述しています。

後述の「anime1」を1秒間で1回、ease形式で再生させます。

次に15行目以降のkeyframesでアニメーションの内容を記述していますが、0%時点で「width:0px」とのみ指定しています。100%時のスタイルを指定しないことで、HTML/CSSでの記述本来の値を100%と見るようになります。