CSS 3のアニメーション機能「Transitions」

エ・ビスコム・テック・ラボ
2009-10-09 23:02:01
  • このエントリーをはてなブックマークに追加
最新特集【一覧】
アドビ、Photoshopの機能追加を含めCreative Cloudをアップデート
システム担当者がより楽しめる「007 スカイフォール」の見方--MI6が遭遇する手痛いピンチは、こうすれば防げた？
Javaエバンジェリストが語る「JavaOne 2012 San Francisco」の見どころ ～築き上げられる『未来のJavaの姿』～

　CSS 3のアニメーション機能を利用すれば、文字や画像を動かしたり、背景色を滑らかに変化させるなど、これまではJavaScriptが必要だった処理をCSSで実現できるようになる。

　CSS 3のアニメーション機能には「Transitions」と「Animations」の2種類が用意されており、いずれもCSSのプロパティ値を変化させることで動きを設定する。たとえば、background-colorプロパティの値を変化させれば、背景色が変化するアニメーションを設定できるというわけだ。

　このとき、Transitionsでは動きの始点と終点の2つの値だけを指定する仕組みになっているのに対して、Animationsではキーフレームによる細かな指定ができるようになっている。

　今回はこれらのうち、Transitionsの機能を利用したアニメーションを紹介したい。

　なお、Transitionsの機能はW3Cの草案（Working Draft）「CSS Transitions Module」として提案されており、現在のところSafari 3.1とGoogle Chrome 2以上が対応している。また、Firefoxはバージョン3.5では未対応となっているが、将来的なバージョンでのサポートを予定している。

背景色が変化するアニメーション

　それでは、実際にTransitionsの機能を利用して背景色が変化するアニメーションを作成してみよう。次のサンプルでは

でマークアップした部分にカーソルを重ねると、背景が黄色（#ffff00）から水色（#00ffff）に変化するように指定している。なお、カーソルを外すと背景は水色から黄色に戻る。

サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する
サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する
サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する
サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する サンプル1：カーソルを重ねると背景が黄色から水色に滑らかに変化する 
div{
background-color: #ffff00;
-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
}

div:hover{
background-color: #00ffff;
}

こんにちは
※ブラウザで表示を確認する

　このサンプルではまず、アニメーションの始点となる黄色の背景色をdiv {background-color:〜}で、終点となる水色の背景色をdiv:hover {background-color:〜}で指定している。

　次に、値を変化させたいプロパティを-webkit-transition-propertyで指定する。サンプルでは背景色の値を変化させたいので「background-color」と指定する。

　あとはアニメーションに関する細かな設定だ。-webkit-transition-durationでは値を変化させる時間を、-webkit-transition-timing-functionでは始点と終点の2つのキーフレーム間の補間方法を指定する。サンプルではそれぞれ「1s」「linear」と指定して、1秒の間に一定のスピードで背景色が変化するように指定している。

　なお、これらの設定は-webkit-transitionプロパティで1つにまとめて指定することもできる。その場合、次のようにproperty、duration、timing-functionの順に半角スペースで値を区切って指定する。

div{
background-color: #ffff00;
-webkit-transition: background-color 1s linear;
}

div:hover{
background-color: #00ffff;
}
※ブラウザで表示を確認する

複数のプロパティを同時に変化させるアニメーション

  • 新着記事
  • 特集
  • ブログ