animation-durationプロパティの説明
CSSのanimation-durationプロパティは、CSSのアニメーションが開始から終わりまで一周する再生時間の長さを指定します。この値は、単位付きの正数または0でなければなりません。
アニメーション関連のプロパティを一括で制御する場合は、animationを使用して下さい。
animation-durationに指定できる値
<time>- アニメーションが一周するまでにかかる時間を指定します。この値には、
0か正数を与えます。単位は必須で、秒（s）かミリ秒（ms）を使用します。animationによる一括指定では、同じ単位付きの数値であるanimation-delayよりも先に書かなければなりません。
animation-durationの使い方とサンプルコード
animation-durationプロパティの構文は以下の通りです。
/* 単一の指定 */
animation-duration: 0s;
animation-duration: 3s;
animation-duration: 100ms;
/* 複数の値を指定 */
animation-duration: 1.6s, 2.48s;
animation-duration: 8s, 16s, 320ms;
/* グローバル値 */
animation-duration: inherit;
animation-duration: initial;
animation-duration: revert;
animation-duration: unset;
animation-durationの実例
それでは簡単な例を見てみましょう。要素が横に動くアニメーションを用意して、再生に要する時間だけを変えた場合、以下のような挙動を示します。この数値を大きくすれば遅く、小さくすれば速くなります。そして0を指定すれば止まります。
<div class="as_move" id="d1s">d1s</div>
<div class="as_move" id="d3s">d3s</div>
<div class="as_move" id="d6s">d6s</div>
.as_move {
margin-top: 10px;
padding: 10px;
width: 50px;
height: 50px;
background: #ccc;
text-align: center;
animation-name: as_move;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#d1s {
animation-duration: 1s;
}
#d3s {
animation-duration: 3s;
}
#d6s {
animation-duration: 6s;
}
@keyframes as_move {
from { margin-left: 0%; } to { margin-left: 80%; }
}