CSS3 アニメーション(Transitions)の使用方法

CSS3 アニメーション(Transitions)の使用方法

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

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

Domo Page

…ここからが続き

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

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

Download

Domo Page