transitionを使ってみる

transitionの使い方を調べてみたのでメモ。

対応ブラウザ

transitionが対応しているブラウザはこちら。
IE10からの対応で、Androidブラウザも考慮する場合はベンダープレフィックスが必要になります。

サンプルコード

実装する場合、transition-property・transition-duration・transition-timing-function・transition-delayを指定します。

HTML

<div id="sample"></div>

CSS

#sample {
	width: 200px;
	height: 200px;
	background: #E74C3C;
	-webkit-transition-property: width;
	transition-property: width;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
#sample:hover {
	width: 600px;
}

transitionのデモページ
　

上記はまとめて指定することもできます。

HTML

<div id="sample2"></div>

CSS

#sample2 {
	width: 200px;
	height: 200px;
	background: #E74C3C;
	-webkit-transition: width 1s linear 0s;
	transition: width 1s linear 0s;
}
#sample2:hover {
	width: 600px;
}

transitionのデモページ2
　

複数指定する場合

複数指定する場合、「,」で区切って指定します。

HTML

<div id="sample3"></div>

CSS

#sample3 {
	width: 200px;
	height: 200px;
	background: #E74C3C;
	-webkit-transition: width 1.5s ease-in-out 0s, background 1s ease-in-out 0.5s;
	transition: width 1.5s ease-in-out 0s, background 1s ease-in-out 0.5s;
}
#sample3:hover {
	width: 600px;
	background: #3498DB;
}

transition複数指定のデモページ
　

【参考サイト】

• CSS3 アニメーション（Transitions）の使用方法 | CSS Lecture
• transition-timing-function－CSS3リファレンス
• CSS transition の使用 – Web developer guide | MDN