昔はそれしか方法がなかったので、マウスホバーでボタン画像デザイン変更を javascript でやっていたけれど…
今はCSSだけでできるので、マウスホバーの簡単なアニメ変化などをわざわざ jQuery を使ってやるのはどうなんだろうか…などと思ったりする今日この頃。

マウスホバーでアニメ表現をCSSだけでやる？javascriptでプログラム作る？

web制作者である皆さんご承知の通り、HTML5・CSS3 対応ブラウザでは、transition ・ transform ・ animation などが使えるようになりました。
なので、CSS だけでアニメ表現がいろいろできるようになり、昔からよくやってた背景色や背景画像の変更なども、javascript使わず CSS だけで実現できるようになりました。

ということでまえがきの文に「だよね～」と共感するか「なにdisってんだよ～」と反感を覚えるかによって、webコンテンツ制作スタイルや制作知識が判定できるのではないかと思ったりします。
後者はもしかすると、プログラム制作費用上乗せからの会社の売上アップを目的としてわざわざプログラムを作りました展開にしているのかもしれませんが…。
素人であるお客さんもいろいろネットで調べたりして、それしか方法がないんですよぉ～などと語る営業さんの嘘を見抜く場合もありますので今この一回だけの金儲けのためだけのホントはやらなくてもいい仕事については、お客さんとそのまわりにつながっている他のお客さんとの長い信頼関係構築を思えば、ほどほどにした方が良いかと思ったりします。

縦メニュホバー演出の考察

CSS3で制作者のみなさんが一番注意されている点として、ブラウザごとに違うベンダープレフィックスが必要・不要なプロパティについてかと思います。
「box-shadow」「text-shadow」が、ブラウザがバージョンアップし、いつのまにかそのまま使えるようになっていたりします。 （※2018年2月原稿改定しました）

animation の keyframes 内で使用する場合に、FF や IE ではベンダープレフィックスが必要だった頃でもキーフレーム内では不要だったり、、[-moz-keyframes] や [-ms-keyframes] の中でベンダープレフィックス付けてる box-shadow が動作しなかったり、webkit 系とオペラ系はプレフィックスを付加してても動作したり、などといろいろで、混乱する頃もありました。
また、verによって違いもありますので、animation内で組み合わせて使う場合などは、それぞれのブラウザで動作確認することが必要かと思われます。
（といっても今時はブラウザが勝手にアップデートされて古いバージョンでのチェックができなくなったりするんですけどね）

縦メニューにマウスホバーした時にする演出として一番多く使われるのは「背景色変化」「背景画像変化」かと思われます。
最近は、2D動作や立体的な動作でアニメさせるサイトも増えてきたかと思います

参考：javascriptでやっていた場合の注意点について

CSSのみで実現している場合は特に問題はないかと思いますが、jQueryプラグインを拾ってきたり、自作のjavascript などのプログラムで transform などをさせていた場合、ブラウザがバージョンアップしてベンダープレフィックスが不要になった時に急に動かなくなって調査修正対応をしなければならなくなる、という事例もあったりしますので注意が必要です。
※プログラム内でスタイルを変更している部分があり、そこにブラウザ判定によるベンダープレフィックスを自動付加していたけれど、ブラウザ判定に使っていたinfo内容が変更されてブラウザ不明になってしまったり、プレフィックスが不要なのに付加しているために動かなくなった等の事例があったりします。
※原森の事例では Opera が webkit 系に切り替わった時に Opera だと判定せずに動かなくなったりしました。
FF や GC で、ベンダープレフィックスを付加していたけれど、アップグレードされて不要になったので、動作しなくなった、などもあります。
※今まで動いていたのに、突然、動かなくなった、という場合、調べて見ると、ブラウザの自動アップデートが原因で、それぞれに判定部分の関数やプレフィックス付加部分を変更して対応する、などの作業が後から発生してしまう、という体験をされたかたも多いのではないかと思ったりします。

サンプルについて

アニメ動作の実験サンプルなので、サブメニューなし状態で作ってます
原森の制作技術研究アピール用であり、ソース配布目的のコンテンツではありませんので、汎用的な作り方ではない場合があります(classではなくidで設定している等)

サンプル1：背景色やボーダーの色変化をいきなり変化させるか、transitionやanimationでアニメ変化させるなど

サンプル2：transform使ってみたサンプルです。お遊び的なもので実用では使えない感じです。

サンプル3：transformで立体的に動作させてみたサンプルです。パネル回転など作ってみました。

サンプル4：transformで立体的に動作させてみたサンプルその2です。ボックス回転など作ってみてます。

サンプル5：背景色の塗りが端から伸びるようなアニメのサンプルです。

サンプル6：特に何も考えず、目に付いたプロパティ使ってみたり、他のアニメと動作を組み合わせてみたサンプルです。

原森の個人的な考察まとめ

あまりいろいろ思いつかなかったのですが、背景塗りアニメやボタンの立体回転ぐらいが使っても不自然にならない演出かと思ったりしました。

主なcssやテクニック

:hover

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

transition

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

animation

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

@keyframes

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

transform

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

ページトップへ