Illust & Music 月の高いところ

今日のプリン言

謎のプリン語る。
一人書く人増えました。

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

2016年06月16日

みやびプリン 140 87

500 320

CSS3、hoverのアニメーションに関して - サムネイル

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

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

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

まずは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使うんだ。

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

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

ありえないほど簡単にホームページができる【Jimdo(ジンドゥー)】 - メイン

トラックバック(0)

トラックバックURL:

コメントする