…ここからが続き

Transitions 基礎

対応ブラウザ（2010 3/29 現在）

Safari , Google Chrome

-webkit-transition-property

transition を適用するプロパティ（background-color など）を設定します。

-webkit-transition-duration

transition の変化をどれくらいで表現するかを設定します。単位は s です。

-webkit-transition-timing-function

transition の変化の具合を設定します。指定できる値は以下の通りです。

• default
• linear（一定のスピード）
• ease-in
• ease-out
• ease-in-out
• cubic-bezier() 4つの数字をカンマ区切りで指定

transition-timing-function の違い

指定方法・表示例

#demo2	{
	background-color: #39C;
	-webkit-transition-property: background-color;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: linear;
}
#demo2:hover	{
	background-color: #990;
}

上記要素はまとめ指定する事も出来ます。

#demo2	{
	background-color: #39C;
	-webkit-transition: background-color 1s linear;
}
#demo2:hover	{
	background-color: #990;
}

背景色を変更するのデモページ

またカンマ（,）を使用する事により複数指定する事も出来ます。

#demo3	{
	background-color: #39C;
	-webkit-transition: background-color 1s linear, color 1s linear, border-color 1s linear;
}
#demo3:hover	{
	background-color: #990;
	color: #FFF;
	border-color: #C30;
}

複数指定指定のデモページ