CSS3 – transitionプロパティ

アップルが提案している「CSS Visual Effects」プロパティの一部をご紹介。

CSSだけでJavaScriptのようなアニメーションができるとても便利なプロパティです。
Safari、Google Chromeでご覧ください。

transition-property、transition-duration、transition-timing-functionを使った例

  • サンプル 01
  • サンプル 02
  • サンプル 03


Safari、Google Chromeで見て頂けると、背景がふんわり出てくるかと思います。
これはCSSのみでできる効果です。

CSSソース

.transition li {
	background-color:#FFF;
	color:#63C;
}

.transition li:hover {
	background-color:#66F;
	color:#FFF;
}

.transition li {
	background-color:#fff;
	-webkit-transition-property:background-color,color;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-out;
}

コードはこんな感じです。

「-webkit-transition-property」適用するプロパティを指定。複数指定の場合は「,」で区切る。
「-webkit-transition-duration」変化にかかる時間を指定。
「-webkit-transition-timing-function」イージングの指定。

となっています。
まだ対応しているブラウザが少ないですが、他のブラウザには影響はないので使ってみてはいかがでしょうか。

Return to the page