animation-duration
animation-duration
は CSS のプロパティで、 1 回のアニメーション周期が完了するまでの所要時間を設定します。
試してみましょう
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation
プロパティを使用すると便利です。
構文
/* 単一のアニメーション */
animation-duration: 6s;
animation-duration: 120ms;
/* 複数のアニメーション */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;
/* グローバル値 */
animation-duration: inherit;
animation-duration: initial;
animation-duration: revert;
animation-duration: unset;
値
<time>
-
1 回のアニメーションの周期にかかる時間。この値は、秒 (
s
) またはミリ秒 (ms
) で指定することができます。値は正の数か 0 でなければならず、単位は必須です。0s
の値は、既定値ですが、アニメーションを実行しないことを意味します。
メモ: 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は 0s
と等価に解釈するかもしれません。
メモ: animation-*
プロパティにカンマ区切りで複数の値を指定した場合、 animation-name
プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。
公式定義
形式文法
animation-duration =
<time [0s,∞]>#
例
animation-duration が 0.7 秒のアニメーション
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 0.7s;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
結果
CSS アニメーションを参照してください。
仕様書
Specification |
---|
CSS Animations Level 1 # animation-duration |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS アニメーションの使用
- JavaScript の
AnimationEvent
API