⌘K

プロパティ animation-duration

プロパティ animation-duration は、 アニメーションの再生時間を設定します。

構文

cssセレクタ {
  animation-duration: s または ms で指定した時間;
}

値

値 説明
s 秒単位で時間を指定します（例：3s）。
ms ミリ秒単位で時間を指定します（例：3ms）。1秒は1000ミリ秒です。

初期値：0s。

例

この例では、アニメーションは3秒間再生されます： 

html<div id="elem"></div>
css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

関連項目

  • アニメーション名を設定するプロパティ animation-name、
  • アニメーション再生前の遅延を設定するプロパティ animation-delay、
  • アニメーションの再生速度を設定するプロパティ animation-timing-function、
  • アニメーションの繰り返し回数を設定するプロパティ animation-iteration-count、
  • アニメーションの再生方向を設定するプロパティ animation-direction、
  • アニメーションの状態を設定するプロパティ animation-fill-mode、
  • アニメーションを一時停止できるようにするプロパティ animation-play-state、
  • アニメーションの一括指定プロパティ animation、
  • アニメーションのキーフレームを定義する @keyframes 命令、
  • 要素へのホバー時のアニメーションであるスムーズなトランジション transition
Backプロパティ animation-nameNextプロパティ animation-delay