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

エ・ビスコム・テック・ラボ
2010-01-04 13:41:01
  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]