CSS3 アニメーション（Transitions）の使用方法

Category ：
CSS3

CSS3 になる事で今までと画期的に変わる部分の一つが、このアニメーション機能です。

自分もまだ勉強中ですが、使い方によってはけっこう面白い動きとかも出来ちゃうので、使いこなせればけっこう楽しめると思いますよ。
なので今回は基礎的な事を書いていきたいと思います。

…ここからが続き

Transitions 基礎

対応ブラウザ（2010 3/29 現在）: Safari , Google Chrome

Transitions

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

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