CSS3

：

プロパティ

：

transition-duration

　 編集：2022.07.08 by T.A.

→●、mdn

時間的変化（遷移にかかる時間の長さ）。

名前 transition-duration
値 <time>#
初期値 0s
適用対象 すべての要素
継承 されない
百分率 受容しない
算出値 各アイテムが所要時間を与えるリスト
正準的順序 文法に従う
アニメーション型 アニメート不可

このプロパティは、古い値から新たな値への遷移にかけられるべき時間を指定する。既定の値 0s は、遷移が即時に行われることを意味する（すなわち、アニメーションは生じない）。transition-duration に対する負な値は、宣言を無効にする。

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdReiSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition-duration:5s;
  transition-property:left;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdReiSpan.style.left='200px'">セット</BUTTON>


<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdRei2Span style="border:1px solid red;
  position:absolute;
  left:0;
  transition-duration:0.5s;
  transition-property:left;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdRei2Span.style.left='200px'">セット</BUTTON>


<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdRei3Span style="border:1px solid red;
  position:absolute;
  left:0;
  transition-duration:0.5s,3s;
  transition-property:left;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdRei2Span.style.left='200px'">セット</BUTTON>
¶「<time>#」が不明

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：