CSS3、hoverのアニメーションに関して

※この記事は7年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

暑い。
昨日、いったんゲーム解禁してしまったみやびです。
意志が弱い。

さて、表題の件。
かなーり乗り遅れてる感満載の題材ですが、ちょっと考えていく。

まずはCSS3を使った、オンマウス（hover）時のアニメーションのさせ方。

.testClass {
  opacity: 1;
  -webkit-transition: 0.4s;
  transition: 0.3s;
}
.testClass:hover {
  opacity: 0.5;
}

いや、これだけでアニメーションできるなんて、ほんと便利な世の中になったもんだ・・・。
jQuery使うとどうしても重いし、なるたけCSS3使っていきたい。

さて、こっからが本題。
このCSS3のtransitionを、"使うか否か"である。

なぜなら、世紀のクソIE様は、
9以前のバージョンでは対応していないからだ。
8以下の葬儀は完了していて、ほぼ絶滅状態だし、
9も引退宣告をし、危篤状態ではあるが、
依然9の使用率は割と高く、無視できない。
うちの会社も、しばらくは対応予定だし。

だが、よく考えてみれば、
CSSにhoverを書いているこの書き方。
未対応ブラウザでも、hoverで反応してくれるではないか！
アニメーションされないだけで、ちゃんとhoverしてくれるなら、
これくらいは、もう使ってもいいじゃないか！！！

もう、JSでいちいち指定するのめんどかったんよ。
transition、イージングもできるからね！
もう、どんどん使いますよ！

名実ともにIE9の絶滅が確認できたら、ほとんどのことはCSS3使うんだ。

あと少し、あと少し・・・。

というわけで、ただ単に、独り言言いたいだけでした。