[CSS]CSS3 Transitionsを使用した画像ギャラリーのスタイルシート

Post on:2010年11月24日

sponsors

CSS3 Transitionsを使用して、対応ブラウザにはアニメーションを加え、非対応ブラウザにはアニメーション無しで表示する画像ギャラリーのスタイルシートを紹介します。

[ad#ad-2]

デモでは下部のサムネイルをホバーすると、アニメーションで大きい画像が表示されます。

サムネイルの左の数字はサムネイルの一覧をアニメーションで変更します。

対応ブラウザはChrome, Safari, Opera, Firefox4となっており、CSS3 Transitionsに非対応のFirefox3, IE6/7/8/9などではサムネイルのホバーで瞬時に画像が表示されるようになっています。