webで簡単なアニメーション表現をする…今でもGIFアニメーションやPNGもアニメーション処理できるものが出てきたりしています（LINEスタンプなんかPNGのアニメーションですね）。そんな中、スタイルシートでもアニメーション処理ができるようになっています。いやー進化ってすごい。
animationプロパティと@keyframes
animationプロパティでkeyframes用の設定をして、keyframesで動きとか設定していくってイメージです。ここでは簡単なものを書いていきたいと思っています。ちなみに設定できるのは
animationで設定できること * @keyframes（アニメーション用）用の名前設定 * アニメーション一回分の時間の長さ * アニメーションのタイミングや進行速度の指定 * ディレイタイミング（いつアニメーション開始するか） * アニメーションの繰り返し回数 * アニメーションを交互に反転再生させるかどうか
という６つあります。それぞれ、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-directionで個別に設定できますので、コードの可読性を重視するなら、書き分けておくのもいいかもですね。
今回はanimationを以下の設定にしてアニメーションをしていきます。
animation-name: key1; animation-duration: 4s; animation-iteration-count: infinite;
色を変化させる
htmlはdiv（クラス名anima1）で、cssで四角い領域を設定して、背景色を変化させるアニメーションをやってみましょう。
【html】
<div class="anima1"></div>
【css】
div {
width: 200px;
height: 200px;
border: 1px solid gray;
margin: 1rem;
}
.anima1 {
animation-name: key1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes key1 {
0% { background-color: red }
50% { background-color: blue }
100% { background-color: red }
}
↓
↓
css部分に注目してみると、divで幅・高さを200pxに、枠線を付けて、間隔を1remに設定。.anima1の部分は名前「key1」、アニメーション時間「4s」、回数を「繰り返し」に。ここまでは大丈夫でしょう。
次の@keyframesが肝ですね。ここでアニメーションの動きや変化の部分の指定をしていきます。名前はanimation-nameで指定した「key1」。これを@keyframesのあとに書いてきます。
｛｝の中身はアニメーション（動き）を0～100％に分けて、その内容を書いていくという感じになってます。ここでは0％（スタート時）に背景色を赤に。50％では背景色を青に、そして100％（終了時）にふたたび赤にするように指定しているわけですね。
この変化が4sの間に起こるので、時間を短くすれば点滅するような変化になったりしますし、長い時間にすれば気が付かないような変化でゆっくりと変わっていくようなものも表現できたりします。また、繰り返しのアニメーションにしているので、スムーズな変化にみせるために、スタートと終了時点の色を同じにして区切れのない変化にしています。
animationとkeyframesの書き方がイメージできましたでしょうか？
左右に揺れるようなアニメーション
次に、そのモノが動くアニメーションをやってみましょう。cssでtransformプロパティでrotateを使用して回転表示をさせることで、左右に揺れるような表現にしてみましょう。クラス名の部分など数字をそれぞれ1から2にしてあります。
【html】
<div class="anima2"></div>
【css】
div {
width: 200px;
height: 200px;
border: 1px solid gray;
margin: 1rem;
}
.anima2 {
animation-name: key2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes key2 {
0% { transform:rotate(-25deg) }
50% { transform:rotate(25deg) }
100% { transform:rotate(-25deg) }
}
↓
↓
@keyframesで指定しているのは、スタート時に-25度から始まって、そこから25度まで回転させ、再び-25度に戻るという動きになってます。
マウスカーソルを合わせると反応するようにする
最後に、マウスカーソルが合った時にアニメーションする処理にしてみましょう。カーソルが合った時ということはcssでは「:hover」を使えばうまくできそうですよね。分かりやすくするために、カーソルが合ったら背景をグレーにしておきます。ここまでをイメージしたコードを書いてみると
【html】
<div class="anima3"></div>
【css】
div {
width: 200px;
height: 200px;
border: 1px solid gray;
margin: 1rem;
}
.anima3:hover {
animation-name: key3;
animation-duration: 1s;
animation-iteration-count: 1;
background-color: gray;
}
@keyframes key3 {
0% { transform:rotate(0deg) }
50% { transform:rotate(180deg) }
100% { transform:rotate(360deg) }
}
↓
↓
ちゃんと、ホバーにあわせて色が変わり回転するような動きになりました！
まとめ
いかがでしたでしょうか。とりあえず、簡単ではありますが、animationを使ったcssでのアニメーション処理を説明してみました。最後のホバー処理などは動きのあるwebを作る一工夫としても面白いんじゃないでしょうか。最後に今回のコードをすべて載せておきます。コピペでhtmlファイルとして保存して試してみてください（ホバー部分は少し改造してあったりします）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>grad</title>
<link rel="stylesheet" href="">
<style>
div {
width: 200px;
height: 200px;
border: 1px solid gray;
margin: 1rem;
}
.anima1 {
animation-name: key1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.anima2 {
animation-name: key2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.anima3 {
animation-name: key3;
animation-duration: 1s;
animation-iteration-count: 1;
}
.anima3:hover {
animation-name: key4;
animation-duration: 1s;
animation-iteration-count: 1;
background-color: gray;
}
@keyframes key1{
0% { background-color: red }
50% { background-color: blue }
100% { background-color: red }
}
@keyframes key2 {
0% { transform:rotate(-25deg) }
50% { transform:rotate(25deg) }
100% { transform:rotate(-25deg) }
}
@keyframes key3 {
0% { transform:rotate(180deg) }
100% { transform:rotate(0deg) }
}
@keyframes key4 {
0% { transform:rotate(0deg) }
100% { transform:rotate(180deg) }
}
</style>
</head>
<body>
<div class="anima1"></div>
<div class="anima2"></div>
<div class="anima3"></div>
</body>
</html>