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

最新特集【一覧】

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

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

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

　CSS 3のアニメーションの機能を利用すると、これまではJavaScriptやFlashを使わないと設定できなかった効果をスタイルシートだけで設定できるようになる。そこで今回は、アニメーションを利用したロールオーバーボタンの作成やフェードインの設定を行いながら、アニメーション関連プロパティの細かな機能を見ていきたい。

　なお、現在のところアニメーションの機能に対応しているのはSafari 4とGoogle Chrome 2以上となっているので、これらのブラウザでサンプルの表示を確認してみてほしい。また、アニメーションの基本的な仕組みについては前回までの記事にまとめている。

アニメーションの基本機能について：

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

画像が少しずつ表示されるロールオーバーボタン

　まずは、カーソルを重ねると画像が少しずつ明るく表示されるロールオーバーボタンを作成したい。このサンプルでは、画像が少しずつ明るくなる部分をアニメーションの機能で設定している。なお、カーソルを重ねて画像が明るくなるまでの時間は1秒に設定してある。

カーソルを重ねると少しずつ画像が明るく表示される

@-webkit-keyframes button {

0%{
background-color: rgba(0,0,0,0.5);
}


100%{
background-color: rgba(0,0,0,0);
}

}

div{
background-image: url(sky.jpg);
}

div a{
background-color: rgba(0,0,0,0.5);
}

div a:hover{
background-color: rgba(0,0,0,0);
-webkit-animation-name: button;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-iteration-count: 1;
}

ENTER

※ブラウザで表示を確認する

　それでは、このボタンがどのように設定されているかを見ていこう。