transition-property：トランジションの対象となるプロパティを指定する

transition-propertyプロパティの説明

transition-propertyは、トランジションの対象となるプロパティを指定します。この値には、CSSのプロパティ名として定義されている文字列が入ります。

例えば、要素の背景色を変化させるトランジション効果を適用する場合に、対象となるプロパティはbackground-colorになりますが、ショートハンド・プロパティのbackgroundでも変更可能です。その祭、ショートハンドに含まれる他のプロパティが変化を受け入れる状態になっていると、意図しない箇所にトランジション効果が発生してしまうため、特別な理由がない限り、対象を絞り込んだマークアップを心がけましょう。

複数のプロパティを指定することも可能です。この場合、カンマ区切りのリストで記述したプロパティに対して、トランジション効果の持続時間を表すtransition-durationや、開始時間を遅らせるtransition-delayを個別に指定できます。

これらの指定は、ショートハンド・プロパティのtransitionで一括操作が可能です。

transition-propertyに指定できる値

none

トランジションの内容を無効にするキーワードです。

all

トランジションの内容を変化するプロパティ全てに適用するキーワードです。

<custom-ident>

トランジション効果の対象となるプロパティの名前です。トランジションが開始条件を満たした場合に、ここで指定されたプロパティが効果の対象となります。ただし、変化後の値が定義されていない場合は特に何も起こらないように見えます。

transition-propertyの使い方とサンプル

transition-propertyプロパティの構文は以下の通りです。

/* キーワード値 */
transition-property: none;
transition-property: all;

/* <custom-ident>値 */
transition-property: color;
transition-property: margin;
transition-property: background-color;

/* 複数の値 */
transition-property: color, font-size;
transition-property: all, color, width;

/* グローバル値 */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: unset;

transition-propertyの実例

それでは実際にtransition-propertyプロパティの書き方を見ていきましょう。以下の例は、マウスポインタが重なった時に特定のスタイルが変化するボックスに対して、トランジション効果を適用するプロパティを変えていった時の比較です。

重要なのは、指定された変化は全ての対象に有効で、トランジション効果が反映されるプロパティだけが変わる点です。トランジションの対象から外れたプロパティは即座に反映されますが、対象のプロパティはtransition-durationで指定された時間をかけて変化します。ここでは持続時間を2秒としています。

色のついたボックスにポインタを重ねて確認してみましょう。マイナスの時間が与えられているボックスは、トランジションの変化が途中から始まったように見えます。スマートフォンやタブレットの場合はタップで発動するように、ontouchstart属性を付与しています。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > div {
	width: 100%;
	margin: 1rem 0 0;
	padding: .5rem 1rem;
	border: 1px solid #000;
	background-color: #09f;
	color: #fff;
	cursor: pointer;
	transition-duration: 2s;
}
section > div:hover {
	width: 50%;
	padding: 2rem 1rem;
	background-color: #f90;
}
#td_1 {
	transition-property: width;
}
#td_2 {
	transition-property: padding;
}
#td_3 {
	transition-property: background-color;
}
#td_4 {
	transition-property: width, padding;
}
#td_5 {
	transition-property: all;
}

<div class="samp_box">
	<section>
		<div id="td_1" ontouchstart>transition-property: width;</div>
		<div id="td_2" ontouchstart>transition-property: padding;</div>
		<div id="td_3" ontouchstart>transition-property: background-color;</div>
		<div id="td_4" ontouchstart>transition-property: width, padding;</div>
		<div id="td_5" ontouchstart>transition-property: all;</div>
	</section>
</div>