CSS3 ロールオーバーするとアニメーションで画像切り替え

昼間にコリスさんのサイトみてたらHTML5とCSS3をページ全体or少しずつ導入するチュートリアルという記事を見つけて、ちょっと実際にやってみたい内容があったので、書いてみた。

CSS3 ロールオーバーするとアニメーションで画像切り替え - jsdo.it - share JavaScript, HTML5 and CSS

アイコンにロールオーバーすると、縦にアニメーションでスライドして画像が切り替わるっていうやつ。いわゆるtransitionってやつですな。ちょっと「おっ」って思わせる仕掛けにいいかも。webkit系以外のブラウザだと普通に画像が切り替わるだけなので、実案件にも採用できそう。今度使えるときがあったらやろうっと。

参考サイト：coliss