Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

transition-property

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

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

サンプルコード
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 {
	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;
}

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

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

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。