CSS3: アニメーション付きのスライドショー

説明補足説明コード分割コード関連書籍コメント投稿
このサンプルは、CSS3のスタイルシートを利用してアニメーション付きのスライドショーを実装しています。サンプルが表示されたら画面最下位に表示されているサムネイルにマウスを移動してください。サムネイルにマウスを移動するとサムネイルがアニメーション化されて拡大表示されます。サムネイルの左側に表示されている番号(1-4)にマウスを移動するとサムネイルがアニメーション化されて切り替わります。サムネイルが切り替わった状態でマウスをサムネイル上に移動すると拡大表示されます。このサンプルは、Google Chrome、Safariでご覧ください。Chrome/Safariでご覧なるとイメージを切り替えたり、拡大するときにアニメーション化します。