【CSS】animation パート1 最低限の設定とアニメーション時間（duration）と繰り返し（infinite）について
アニメーションについて簡単にまとめました。今回は最低限必要なコードとアニメーションの時間（duration）と繰り返し（infinite）について解説します。
animationの設定
| プロパティ | 説明 | 初期値 |
|---|---|---|
| animation-name | アニメーションに名前を付けます。任意の英数字。 | なし |
| animation-duration | 1 回のアニメーションに要する時間の長さを設定します。 | 0 |
| animation-timing-function | アニメーションの動きを設定します。 | ease |
| animation-delay | 要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。 | 0 |
| animation-iteration-count | アニメーションを繰り返す回数を設定します。 アニメーションを無限に繰り返すには infinite を指定してください。 | 1 |
| animation-direction | 一回のアニメーションが終了したら、逆方向にアニメーションして繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。 | normal |
| animation-fill-mode | CSS アニメーションの実行の前後にどのようにスタイルを適用するかを設定します。 | none |
設定方法
共通のHTML
HTML
<div class="box"></div>
クラス（.box）に対して,以下のようにすべて書くこともできますが、
CSS
.box{
animation-name: box;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
以下のように一気に書くこともできます。
CSS
.box{
animation: box 3s ease .5s infinite normal
forwards;
}
//animation: name duration timing-function delay iteration-count
direction fill-mode;
「秒」という同じ値を持つプロパティ（duration）と（delay）は、1つ目が（duration）2つ目が（delay）となります。
数値(s)による値がひとつのみの場合は、（duration）が定義され、２つある場合は（duration）と（delay）の順で定義されます。
それ以外のプロパティ値の記述に決まった順序はなく、記述が前後しても正常に実行されます。
最低限必要な設定
アニメーションの名前とアニメーションさせる時間（duration）
アニメーションの名前と アニメーションさせる時間（duration）は必須です。これがないとアニメーションしません。
CSS
.box{
animation: box 3s;
//nameとdurationはお忘れなく
}
@keyframes
@keyframesで詳しいアニメーションを記述します。以下は、3秒かけて0%から100%までアニメーションするということです。
CSS
.box{
width: 100px;
height: 30px;
background: #aaa;
animation: box 3s;
}
@keyframes box{
//@keyframesの後にアニメーションの名前を記述
0%{
width: 0;
}
100%{
width: 100%;
//3秒かけて幅（width）が0~100％にアニメーションします
}
}
このページを開いたときに一回アニメーションしてしまったので、ここでページを再度読み込んでください。
アニメーションさせる時間 duration
アニメーションさせる時間を変えてみましょう。
時間は秒で、「数値」+「ｓ」で記述します。
CSS
.box1{ animation: box 1s; }
.box2{ animation: box 2s; }
.box3{ animation: box 3s; }
.box4{ animation: box 4s; }
.box5{ animation: box 5s; }
アニメーションさせる回数、繰り返し
回数
数字を加えるだけです。ここでは5回繰り返されます。
CSS
.box{
animation: box 2s 5; //「5」を加えるだけ
}
繰り返し
無限に繰り返す場合、「infinite」と記述します。
CSS
.box{
animation: box 1s infinite;
}
まとめ
【CSS】のアニメーションの基本について解説しました。animation-timing-function、animation-delayやanimation-directionについては後日扱いたいと思います。
必要最低限の記述：animation: name（アニメーションの名前） duration（アニメーションの時間）
@keyframes name { 0%{値} 100%{値}}
アニメーションの時間（duration）：animation: name 「数値」+「s」
アニメーションの回数：animation: name duration indinite(無制限繰り返し)または数字
