ホバーアニメボタンについての考察

昔は画像メニューやバナーなどをマウスホバーした時に別の画像に差し替える時はjavasctipで演出したりしてましたが、 CSSだけで画像差し換え演出もできるようになったので、わざわざjavascript（やjQueryプラグイン)をそれだけのために使うのは、 技術やアイデアを持っている制作者からは、どう思われてしまうのだろう、 などと思ったりする今日この頃です。
（どこかの誰かを dis っているわけではありません、個人的感想です）

このページの例は、div1個 + css (transition or animation) + :before , :after でいろいろ作ってみたサンプルとなっています。

div・spanタグをたくさん使って作れば、いろいろ簡単に作れますが、基本テーマとしてdiv1個で作るようにしています。
例えば、ボーダーアニメやシャッターのような演出をしたいだけのために、spanをたくさん使ったり、jQueryプラグインを使うのは本末転倒ではないかと思ったので、 実験しながら作ってみた、というのが最初の動機となっています。

サンプル2やサンプル3のボーダーアニメは、FF,GC,Oでは想定通りの動作をしてますが、IE10の場合のみ、ウインドウサイズが小さい時に（横940以下）、ボーダーの位置がずれる場合がありました。（原森サイトの場合、ウインドウサイズにより、大きなレイアウト用の親divのサイズを変更しているからなのか、要素配置の計算時にIEと他のブラウザでは計算誤差があり、配置がずれるため？かもしれません）
※上記は2014年頃のネタです。どんどんブラウザがアップデートしていますので、詳細に確認してませんが、今では多分普通に動くのではないかと思います。
というか、IE8はもう対応しなくていいはずですが、IE10対応も、もう不要なんでしょうかね？

※ 2018.05 に GCで久しぶりに確認してみたところ、ボーダーアニメ3が昔と違ってぶるぶる震えるようになっていました。

主なcssやテクニック

:hover

マウスホバーの擬似クラス

transition

時間的変化を指定するcssプロパティ

animation

アニメを指定するcssプロパティ

@keyframes

アニメのキーフレーム指定

transform

要素の変形を指定するcssプロパティ

ページトップへ