今回の注目サイト：
Knormal
http://www.knormal.com/profile/
デザインとテクノロジーをもとにブランディングやWebサイト制作などを手がける、米国のエージェントのポートフォリオサイト。
気持ちよく回転する円グラフ
シンプルなフラットデザインを採用した「Knormal」のポートフォリオサイト。このサイトでは、3枚の画像からなる円グラフを重ね合わせ、CSSアニメーションによって回転させている。インフォグラフィックとしてはごく単純なものだが、スムーズに気持ちよく動くアニメーションと独特の配色がサイトの個性を表していて、おもしろさがある。
今回は、Knormalのインフォグラフィックをヒントに、グラフの基本的な構造から、CSS3を使った動かし方、JavaScriptやSVGと組み合わせた発展的なグラフの作り方までを解説する。
STEP 1：グラフの構造を考える
最初に、円グラフの構造から考えてみよう。立体的に見える円グラフは、3つのレイヤーからなる。色や形状の異なる3つの円グラフ画像を用意しておき、それぞれ別々のレイヤーとして配置して重ね合わせる。
各レイヤーには、0から360度へ時計回りに回転するアニメーションか、0から-360度へ半時計回りに回転するアニメーションのどちらかを設定する。この回転アニメーションを繰り返すことで、立体的で動く円グラフを表現できるわけだ。
STEP 2：CSS Keyframesでグラフを回転させる
実際にグラフのアニメーションを作ってみよう。回転アニメーションは、CSSの@keyframesを使って宣言する。@keyframesプロパティは、アニメーションの時間経過を0%（アニメーションの開始時）〜100％（終了時）のパーセント単位で指定し、その時点でのCSSのプロパティと値を記述する。
@keyframes ANIMATION-NAME{
0% {/* 開始時のプロパティ */}
50% {/* 途中経過のプロパティ */}
100% {/* 終了時のプロパティ */}
}
@keyframesで宣言したアニメーションは、animationプロパティで時間と再生回数、イージングを設定すると実行される。
.target {
animation: ANIMATION-NAME 1s ease infinite;
}
0 から360度回転のアニメーション
0から360度に回転させる場合、0%にrotate(0deg);、100%にrotate(360deg);を指定する。アニメーションの回数を「infinite」（無制限）とすると、グラフがくるくると回り続けるアニメーションができる。
■ソースコード（CSS）
.stage{
position: relative;
height: 400px;
width: 400px;
}
.stage > div{
position: absolute;
height: 400px;
width: 400px;
}
.rotateL{
background: url(img/rotate.png) no-repeat;
-webkit-animation: SPINER 10s linear infinite;
animation: SPINER 10s linear infinite;
}
@-webkit-keyframes SPINER{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@keyframes SPINER{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
■ソースコード（HTML）
<div class="stage">
<div class="rotateL"></div>
</div>
0 から-360度回転のアニメーション
同様にして、逆向き（0から-360度）のアニメーションも設定する。
■ソースコード（CSS）
.rotateL{
background: url(img/rotate.png) no-repeat;
-webkit-animation: SPINER_BACKWARD 10s linear infinite;
animation: SPINER_BACKWARD 10s linear infinite;
}
@-webkit-keyframes SPINER_BACKWARD{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
@keyframes SPINER_BACKWARD{
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/004/2.html
対応ブラウザー：Firefox, Chrome, Safari, Opera, IE10~（IE9以下ではアニメーションは動作しない）
STEP 3：複数レイヤーでのKeyframesアニメーション
2種類の回転アニメーションの作り方がわかったら、複数のレイヤーを組み合わせ、Knormalのような少し複雑なアニメーションを作成しよう。
.stageを基点にposition:absoluteで5つのレイヤー（.rotate1〜.rotate5）を配置し、時計回りのアニメーション（SPINER）と、反時計回りのアニメーション（ SPINER_BACKWARD）を交互に適用する。animationプロパティで時間差をつけて実行すると、グラフが立体的に回転しているように見える。
| レイヤー | rotate1 | rotate2 | rotate3 | rotate4 | rotate5 |
|---|---|---|---|---|---|
| グラフ画像 |
|
|
|
|
|
| 回転方向 | 時計回り | 反時計回り | 時計回り | 反時計回り | 時計周り |
| 時間 | 10秒 | 8秒 | 6秒 | 4秒 | 2秒 |
■ソースコード（CSS）
.stage{
position: relative;
height: 400px;
width: 400px;
}
.stage > div{
position: absolute;
height: 400px;
width: 400px;
opacity: 0.9;
}
.rotate1{
background: url(img/005_5.png) no-repeat;
-webkit-animation: SPINER 10s linear infinite;
animation: SPINER 10s linear infinite;
}
.rotate2{
background: url(img/005_4.png) no-repeat;
-webkit-animation: SPINER_BACKWARD 8s linear infinite;
animation: SPINER_BACKWARD 8s linear infinite;
}
.rotate3{
background: url(img/005_3.png) no-repeat;
-webkit-animation: SPINER 6s linear infinite;
animation: SPINER 6s linear infinite;
}
.rotate4{
background: url(img/005_2.png) no-repeat;
-webkit-animation: SPINER_BACKWARD 4s linear infinite;
animation: SPINER_BACKWARD 4s linear infinite;
}
.rotate5{
background: url(img/005_1.png) no-repeat;
-webkit-animation: SPINER 2s linear infinite;
animation: SPINER 2s linear infinite;
}
@-webkit-keyframes SPINER{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@keyframes SPINER{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes SPINER_BACKWARD{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
@keyframes SPINER_BACKWARD{
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
■ソースコード（HTML）
<div class="stage">
<div class="rotate1"></div>
<div class="rotate2"></div>
<div class="rotate3"></div>
<div class="rotate4"></div>
<div class="rotate5"></div>
</div>
