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

初期値 all
適用対象 全ての要素、::before::after擬似要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

transition-propertyプロパティの説明

CSSの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属性を付与しています。


<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>

.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;
}

transition-propertyに関連するCSSプロパティ

トランジション
transition 時間によって変化するトランジション効果の値をまとめて操作する
transition-delay トランジションが開始する前の待ち時間を指定する
transition-duration トランジションが開始してから終了するまでの時間を指定する
transition-property トランジションの対象となるプロパティを指定する
transition-timing-function トランジションが開始してから終了するまでの変化の遷移を指定する