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

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article