CSS 3のアニメーション機能を使ったロールオーバーやフェードインの設定

エ・ビスコム・テック・ラボ
2010-01-04 13:41:01
CSS 3のアニメーションの機能を利用すると、これまではJavaScriptやFlashを使わないと設定できなかった効果をスタイルシートだけで設定できるようになる。今回はアニメーションを利用したロールオーバーボタンの作成やフェードインの設定を行いながら、アニメーション関連プロパティの細かな機能を見ていきたい。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

キーフレームの補間方法

　ロールオーバーやフェードインといったアニメーションの動きに大きく影響しているのが、-webkit-animation-timing-functionで指定するキーフレームの補間方法だ。

　指定できる値は次のようになっており、アニメーションをどのような速度で変化させるかを指定することができる。

-webkit-animation-timing-functionの値
値変化
linear一定の速度
ease最初と最後に少し減速
ease-in最初に減速
ease-out最後に減速
ease-in-out最初と最後に減速

　たとえば、次のアニメーションでは画像をそれぞれの補間方法で上から下に落下させている。補間方法によって動きの速度が変わることを確認してほしい。

キーフレームの補間方法による動きの違い（クリックで拡大画像を表示） キーフレームの補間方法による動きの違い（クリックで拡大画像を表示）
※ブラウザで表示を確認する

　なお、今回紹介したサンプルではアニメーション以外にもCSS 3の機能を利用している。それぞれの機能について詳しくは以下の記事を参照してほしい。

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