transition-property

『transition』でのアニメーション効果を適用させたいプロパティを個別に指定できます。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにすることが一般的です。またPCのスペックによっては動きがカクついてしまう場合があります。

サンプルコード

style.css

/* widthのみトランジション */
.box { transition-duration: 0.5s; transition-property: width;}

/* all: 変化する全プロパティにトランジション */
.item { transition-duration: 0.3s; transition-property: all;}

/* none: トランジション無効 */
.no-anim { transition-property: none;}

/* background-colorのみトランジション */
.btn { transition-duration: 0.3s; transition-property: background-color;}

/* 複数プロパティをカンマ区切りで指定 */
.card { transition-property: transform, opacity, box-shadow; transition-duration: 0.3s;}

ブラウザでの表示結果

div {
	background :#f00;
	width: 200px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	
	transition-property: width;
	-webkit-transition-property: width;
	-moz-transition-property: width;
	-ms-transition-property: width;	
}
div:hover{
	width: 300px;
	background: #ff0;
}

概要

『transition』でのアニメーション効果を適用させたいプロパティを個別に指定できます。

『transition-property』の値は『,』で区切ることにより複数のプロパティを同時に指定できます。

div {
	background :#f00;
	width: 200px;
	height: 50px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	
	transition-property: width, height;
	-webkit-transition-property: width, height;
	-moz-transition-property: width, height;
	-ms-transition-property: width, height;
}
div:hover {
	width: 300px;
	height: 200px;
	background: #ff0;
}

よくあるミス

アニメーションできないプロパティを指定してしまう

すべてのCSSプロパティがトランジションに対応しているわけではありません。例えば『display』プロパティは値が離散的（none/block など）なため、アニメーションできません。アニメーション可能なプロパティは数値で表現できるプロパティ（色・大きさ・位置など）が対象です。

/* NG: displayはトランジションできないため即座に切り替わる */
.box {
    display: block;
    transition-property: display;
    transition-duration: 0.3s;
}

修正後は次の通りです。

/* OK: opacityやvisibilityを使用するとトランジション可能 */
.box {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.3s;
}
.box.hidden { opacity: 0; }

transition-propertyのみ指定してtransition-durationを省略してしまう

『transition-property』を個別指定した場合、必ず『transition-duration』も指定する必要があります。duration の初期値は『0s』のためアニメーションが発生しません。

/* NG: durationが0sのためアニメーションしない */
.box { transition-property: background-color; }

修正後は次の通りです。

/* OK: durationも合わせて指定する */
.box { transition-property: background-color; transition-duration: 0.3s; }

対応ブラウザ

デスクトップ

Chrome

26 以降 ○

25 △

24 △

23 △

22 △

21 △

20 △

19 △

18 △

↑ prefix『-webkit-』が必要

Firefox

16 以降 ○

15 △

14 △

13 △

12 △

11 △

10 △

9 △

8 △

↑ prefix『-moz-』が必要

3 以前 ×

Safari

9 以降 ○

8 △

7 △

6 △

5 △

4 △

↑ prefix『-webkit-』が必要

2 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

12.1 以降 ○

10 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

6 △

5 △

4 △

3 △

2 △

↑ prefix『-webkit-』が必要

1 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

CSS辞典

transition-property

サンプルコード

style.css

ブラウザでの表示結果

概要

よくあるミス

アニメーションできないプロパティを指定してしまう

transition-propertyのみ指定してtransition-durationを省略してしまう

対応ブラウザ