第3回：HTML5&CSS3でポケモン描こうZ!【アニメーション】

需要と供給完全フルシカトなこのコーナー。第3回はCSSアニメーションです。
今回は、第1回で作ったモンスターボールのソースコードに、アニメーションのソースコードを追加していく形で進めますので、第1回で作成したHTMLとCSSをご用意ください。

第1回はコチラ
第2回はコチラ

完成形はこんな感じ！

それっぽく見えりゃそれで良し！　そんじゃー、行ってみましょう！
追加するソースコードはこれだ！

/*ガタガタ*/ 
.gatagata { 
position: absolute; 
animation: alternate-reverse 0.2s gatagata infinite linear; 
} 
@keyframes gatagata { 
0% {transform: rotateZ(25deg) translateX(10%);} 
50% {transform: rotate(0deg) translateX(0%) translateY(10%);} 
100% {transform: rotateZ(-15deg) translateX(-10%);} 
} 
/* チカチカ */ 
.chikachika { 
width: 12px; 
height: 12px; 
border-radius: 100%; 
background-color: hsla(359,100%,50%,0.6); 
box-shadow: 0 0 3px 5px hsla(359,100%,50%,0.3); 
position: absolute; 
z-index: 13; 
margin: -1px; 
animation: alternate-reverse 0.2s chikachika infinite linear; 
} 
@keyframes chikachika { 
0% {transform: scale(0);} 
100% {transform: scale(1);} 
}

少し前までブラウザごとに指定が必要だったけど、いつの間にやら対応されて不要になったぞ！　ええこっちゃ！　IEは知らん！

さて、この動き、アニメーションを二つ使っています。
まずはボールそのものにガタガタ動くアニメーションを。
続けて、スイッチに赤い点滅をプラス。
この赤い点滅、本当に点滅しているのではなく、『boxshadow』でぼかした赤丸を重ね、『拡大縮小』を高速で繰り返してるだけなんですね。
なお、延々ガタガタするだけで、ゲットは永久に出来ません。そんじゃー解説行くZ！

それではひとつずつ解説するよ！
まず、ボールをガタガタ動かしてるのは下のコード。

/*ガタガタ*/ 
.gatagata { 
position: absolute; 
animation: alternate-reverse 0.2s gatagata infinite linear; 
} 
@keyframes gatagata { 
0% {transform: rotateZ(25deg) translateX(10%);} 
50% {transform: rotate(0deg) translateX(0%) translateY(10%);} 
100% {transform: rotateZ(-15deg) translateX(-10%);} 
}

『@keyframes』の後に半角スペース、そしてこの動きに対して半角英数で自分の好きな名前をつけます。ガタガタさせる動きなので『gatagata』にしました。（まんま）
これを『animation』プロパティで読み込ませるわけです。（プロパティ値の中に『@keyframes』でつけた『gatagata』が入ってますね）
CSSのアニメーションというやつは、『@keyframes』で指定した『transform』を連続で実行させることで動いているように見せる……という仕組みです。違うかもしれません。（雑）
『gatagata』に書いてある『animation』は、複数の要素をひとまとめに書いてるだけでして、個別で指定する場合は以下の感じ。

/*逆再生させるか繰り返し再生させるか*/
animation-direction: alternate-reverse;
/*再生時間*/
animation-duration: 0.2s;
/*キーフレームの名前*/
animation-name: gatagata;
/*繰り返す回数*/
animation-nteration-count: infinte;
/*再生速度の変化パターン*/
animation-timing-function: linear;

上のを一行でまとめて指定したものが『animation: alternate-reverse 0.2s gatagata infinite linear;』というわけです。

訳すとこんな感じ。
『アニメーションは繰り返し再生してください。再生時間は0.2秒です。アニメーションのキーフレームは『gatagata』を使用します。無限に繰り返します。速度は一定を保ってください』。

続けて、『@keyframes』の解説行きます。

先ほども言いましたが、『@keyframes』の後に半角スペース、そしてこの動きに対して半角英数で自分の好きな名前をつけます。
つまり、複数のkeyframesを用意しておけば、気分に合わせて『animeation』で指定しているキーフレーム名を書き換えるだけで動きを変更出来るというわけです。
さて、それでは動きの指定をしましょう。『%』は動くタイミングです。0%は開始時～100%は終了時の動きを意味しています。
『transform』は第1回でボールをくるりんさせた時に使いましたね。『rotate』は回転角度。『中心を軸に回転させたい』時は『rotateZ』といった具合にZをつけます。（横軸は『X』、縦軸は『Y』、そして続く（）内に回転角度を指定。25度に傾ける場合は『(25deg）』と書きます。『deg（度）』を忘れずに。
なお、半角スペースで複数指定可能です。『translateX』とは『右方向に移動』という意味。左に移動させたい時は、単純に数字をマイナス指定するだけ。
縦に移動させたい場合は『translateY』といった具合に『Y』をつけます。上に移動させたいときは、同様に数字をマイナス指定しましょう。
『0% {transform: rotateZ(25deg) translateX(10%);}』とは、訳すと『開始時の動きを指定します。中心を軸に25度回転。同時に右に10%動かしてください』です。
続けて『50% {transform: rotateZ(0deg) translateX(0%);}』とは『再生時間の真ん中は次の通りです。回転は初期値に戻ります。横の動きも初期値に戻してください。縦軸に10%動かします』といった感じ。
100%は0%の逆ですね。（不規則な感じにするため、回転角度は-15度にしました）
もっと細かく指定も出来ますが、今回はこんな感じで。
これが、『animation』で指定した0.2秒の間に再生される動きです。

続けて、ボタンの点滅もやっちゃいましょう。

/* チカチカ */ 
.chikachika { 
width: 12px; 
height: 12px; 
border-radius: 100%; 
background-color: hsla(359,100%,50%,0.6); 
box-shadow: 0 0 3px 5px hsla(359,100%,50%,0.3); 
position: absolute; 
z-index: 13; 
margin: -1px; 
animation: alternate-reverse 0.2s chikachika infinite linear; 
} 
@keyframes chikachika { 
0% {transform: scale(0);} 
100% {transform: scale(1);} 
}

『gatagata』と違うのは赤丸を作る必要があり、その『赤丸に対しての』アニメーションであるという点でしょうか。（『gatagata』はボールそのものに対する動きなので、『ball_box』に値を追加）
まず『boxshadow』でぼかした赤丸を開閉スイッチに重なるよう配置。光っているよう見せるため、色はhslaで半透明に指定します。（hslaの最後にある0.6とか0.3というのが透過度です）
『keyframes』に書いてある『scaie』は『拡大・縮小』という意味です。(0)は最小、(1)で最大。（(0.1)とか(0.5)とか、そんな感じで数字を指定します）
今回はチカチカ点滅してるように見せることが目的なので、0%と100%だけの指定でOK。アニメーションにかかる時間も短くね。

rotate：回転角度（(XYZで軸指定）
　使用例：rotateZ(25deg）　←中心を軸に25度回転
translateY：下移動（上移動はマイナス指定）
　使用例：translateY(100px)　←下へ100px移動。『px』は『%』でもOK
scale：拡大・縮小（Xをつければ横、Yをつければ縦。カンマで区切れば縦横まとめて指定可能）
　使用例：scale(1.5,0.5)　←横へ1.5拡大、縦に0.5縮小
skew：角度（XY軸に傾斜させる）
　使用例：skewX(25deg)　←Xを軸に25度傾ける

指定出来るプロパティはざっとこんな感じでしょうか？
とまあ、ここまで色々説明してますが、ふつーに意味不明なのはわかってますので、素直にコピペしてください。
『translateX』でコロコロ転がしてみっぞ！

.corocoro { 
position: absolute; 
animation: alternate 2s corocoro infinite linear; 
} 
@keyframes corocoro { 
0% {transform: translateX(0px)} 
25% {transform: translateX(100px);} 
50%{transform: translateX(200px);} 
75% {transform: translateX(300px);} 
100%{transform: translateX(400px);} 
}

む。なんだこの『コレジャナイ」感。『translate』だけではダメってコトネ！
ここは『transformプロパティ』を複数指定するぞ！

ボールをガタガタさせる時もやりましたが、半角スペースで区切って複数指定してみましょう。
『translateX』では横に動くだけなので、『rotate』で回転も追加。

.corocoro { 
position: absolute; 
animation: alternate 2s corocoro infinite linear; 
} 
@keyframes corocoro { 
0% {transform: translateX(0px) rotate(0deg);} 
25% {transform: translateX(200px) rotate(180deg);} 
50%{transform: translateX(400px) rotate(360deg);} 
75% {transform: translateX(600px) rotate(540deg);} 
100%{transform: translateX(800px) rotate(720deg);} 
}

これでコロコロしましたね！　数字をいじれば、もっと長い距離コロコロ出来ます。

ドリブルだって出来ちゃうぞ！
絵のデフォルメを意識して、『scaleY』で縦方向の拡大縮小を追加。
ついでに『rotateZ』でちょっぴり回転もプラス。これでどうだ！

.dribble { 
position: absolute; 
animation: alternate 0.3s dribble infinite linear; 
} 
@keyframes dribble { 
0%  {transform: translate(0px,-300px) scaleY(1.5) rotateZ(0deg);} 
25% {transform: translate(0px,-150px) scaleY(1) rotateZ(10deg);} 
50% {transform: translate(0px,0px) scaleY(0.2) rotateZ(0deg);}
75% {transform: translate(0px,-150px) scaleY(1) rotateZ(-10deg);} 
100%{transform: translate(0px,-300px) scaleY(1.5)  rotateZ(0deg);} 
}

へったくっそなドリブル完成！　表情もちょっと変えてみた。
なお、使い所はまったくございません。おまいらの創意工夫に託します。（丸投げ）
オマケのネム口ー。ヨダレもつけてネ☆

.eye_B { 
width: 25px; 
height: 4px; 
background-color: #000; 
border-radius: 0 0 10px 10px; 
position: absolute; 
z-index: 23; 
margin: 47px 20px; 
} 
.eye_B_right {margin-left: 75px;} 
.yodare { 
width: 5px; 
height: 20px; 
background-color: #C6E4FF; 
position: absolute; 
z-index: 20; 
margin: 55px 63px; 
border-radius: 100%; 
} 
/* うとうとアニメーション */ 
.utouto { 
transform-origin: 50% 100%; 
animation: 7s utouto infinite linear; 
} 
@keyframes utouto { 
0% {transform: scale(0.9) rotate(-10deg);} 
45% {transform: scale(1) rotate(0deg);} 
50% {transform: scale(1) rotate(10deg);} 
75% {transform: scale(1) rotate(0deg);} 
100% {transform: scale(0.9) rotate(-10deg);} 
} 
/* ねむねむ */ 
.nemunemu { 
transform: rotate(15deg); 
margin-top: 15px; 
margin-left: 59px; 
position: absolute; 
z-index: 100; 
} 
.nemu_box { 
position: relative; 
background: #C6E4FF; 
border-radius: 100%; 
display: block; 
width: 25px; 
height: 30px; 
} 
.nemu_box:after { 
top: 100%; 
left: 50%; 
border: solid transparent; 
content: " "; 
position: absolute; 
pointer-events: none; 
border-color: rgba(136, 183, 213, 0); 
border-top-color: #C6E4FF; 
border-width: 7px; 
margin-left: -7px; 
margin-top: -3px; 
} 
/* ちょうちんアニメーション */ 
.suyasuya {animation: 5s suyasuya infinite alternate; } 
@keyframes suyasuya { 
0% {transform: translate(0, 0);} 
50% {transform: translate(0, 2px) scale(0.7);} 
100% {transform: translate(0, 0);} 
}

鼻ちょうちんと顔の働きを個別に指定して動かしてます。「カクンッ」って動きがより一層、寝てるっぽい感じで気に入ったので、逆再生はナシで。
鼻ちょうちんはシンプルに拡大縮小の繰り返し。第2回で作ったモク口ーのCSSに追加するだけで0K。
HTMLもこんな感じ。

<div class="mokuro"> 
<div class="base_wt"> 
<div class="base_bt"></div><div class="base_top"></div> 
<div class="wing"></div> 
<div class="reef"></div><div class="reef_2"></div> 
<div class="leg"></div>
<div class="face utouto"> 
<div class="white"></div> 
<div class="eye_B"></div>
<div class="eye_B eye_B_right"></div> 
<div class="beak_bt"></div><div class="beak"></div> 
<div class="beak_line"></div><div class="yodare"></div> 
</div> 
<div class="nemunemu">
<div class="nemu_box suyasuya"></div>
</div> 
</div> 
</div> 
</div>

どこが追加・変更されたかわかったかな？
居眠りからドリブルまで、モクさんの汎用性パネェ。みんなも描いてみるといいよ！
さて、第3回となりましたが、ひとまずお絵かき講座は予想通りこれにて終了。（続けるにもネタがないんや……）
あれこれ専門用語とかも出てきましたが、興味ある人は勉強して色々試してみてください。
ここまで作成したHTMLとCSSの一覧ダウンロードをご用意しました。
よければダウンロードして、お試しください。（圧縮してあるので、解凍してから開いてください）

ダウンロード
※紹介したのとビミョーにコード名が変わってたりするトコあるかもしんないけどそこは目ぇつぶってネ☆