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

エ・ビスコム・テック・ラボ
2009-10-09 23:02:01
  • このエントリーをはてなブックマークに追加

 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;
}
ブラウザで表示を確認する

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

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