CSS3

プロパティ

transition-property

→●、mdn

時間的変化（遷移が適用される CSS プロパティの名前）。

<single-transition-property>

＝all | <custom-ident>

all

すべてのプロパティを遷移対象にすることを指示する。

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

<custom-ident> ○

遷移対象になるプロパティ名。

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

¶「<single-transition-property>#」が変

実装は、リストされた識別子に自身が認識しないプロパティ名がある場合でも、リスト内の他のアニメート可能なプロパティについては、［［transition-duration／transition-delay／transition-timing-function］プロパティが与えるリスト内の、対応する index に位置する［所要時間／遅延／計時関数］］を利用して、遷移を開始させるものとする。
言い換えれば、リストどうしの index 対応を保全するため、認識しないプロパティも保つものとする。

<single-transition-property> 内の <custom-ident> 生成規則では、<custom-ident> から常に除外されるキーワードに加えて、キーワード none も除外される。すなわち、キーワード none、inherit、initial は、複数個の識別子からなるリストの中では、許可されない。

キーワード all に対しては、アニメート可能なプロパティすべてが遷移の対象になる。略式プロパティの識別子に対しては、その下位プロパティすべてが遷移の対象になる。すなわち実装は、それらのプロパティに対し、そのアイテムに対応する index に位置する［所要時間、遅延、計時関数］を利用して、遷移を開始させるものとする。

transition-property の値の中に、同じプロパティが複数回、指定された場合（［それを下位プロパティに持つ略式プロパティや all］を通して指定されるものも含め）、それらのうち最後のアイテムのみが有効になる。

注記： 値 all は、すべてのプロパティを対象にする略式プロパティ all と類似な仕方で働く。

div {
  transition-property: opacity;
  transition-duration: 2s;
}

div {
  transition-property: opacity, left;
  transition-duration: 2s, 4s;
}

テスト