CSS3

プロパティ

animation-duration

→● mdn

アニメーションの 1 周回の 所要時間。

animation-duration プロパティは、アニメーションの 1 周回の所要時間を定義する。

以下のCSSが組み込んであります：

<time> ○

アニメーションの 1 周回にかかる時間の長さを指定する。負な <time> は無効。

<time> に対する 0s（初期値）は、アニメーションを瞬時に終わらせる。@keyframes の効果はなくなるが、アニメーションそれ自体は生じる ― 特に、開始／終止イベント（animationstart／animationend）は発火され、animation-fill-mode の定義により、その値に応じて：

• backwards／both ならば：
  animation-delay の間に，アニメーションの最初のフレームが表示される。
• forwards／both ならば：
  animation-delay の後に，アニメーションの最後のフレームが表示される。
• none ならば：
  アニメーションによる視覚的な効果はない。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
 "></DIV>
</DIV>

テスト