animation-duration:アニメーションが開始するタイミングを指定する
初期値 | 0s |
適用対象 | 全ての要素、疑似要素 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
animation-durationプロパティの説明
animation-duration
は、CSSのアニメーションが開始から終わりまで一周する再生時間の長さを指定します。この値は、単位付きの正数または0
でなければなりません。
アニメーション関連のプロパティを一括で制御する場合は、animation
を使用して下さい。
animation-durationに指定できる値
- <time>
- アニメーションが一周するまでにかかる時間を指定します。この値には、
0
か正数を与えます。単位は必須で、秒(s
)かミリ秒(ms
)を使用します。animation
による一括指定では、同じ単位付きの数値であるanimation-delay
よりも先に書かなければなりません。
animation-durationの使い方とサンプル
animation-duration
プロパティの構文は以下の通りです。
CSS
/* 単一の指定 */
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
を指定すれば止まります。
CSS
.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%; }
}
HTML
<div class="as_move" id="d1s">d1s</div>
<div class="as_move" id="d3s">d3s</div>
<div class="as_move" id="d6s">d6s</div>
表示確認
animation-durationに関連するCSSプロパティ
アニメーション | |
---|---|
animation | アニメーションに関する指定をまとめて行う |
animation-name | アニメーションの名前を定義する |
animation-duration | アニメーションの再生一回分の時間の長さを指定する |
animation-timing-function | アニメーションの再生タイミングに変化を付ける |
animation-delay | アニメーションが開始するタイミングを指定する |
animation-iteration-count | アニメーションの繰り返し回数を指定する |
animation-direction | アニメーションの再生方向を指定する |
animation-fill-mode | アニメーションが再生されていない時にどのような状態で待機するかを指定する |
animation-play-state | アニメーションを再生させるか一時停止させるか指定する |