CSSの進化は恐ろしいですね(笑)。今回はJavaScriptを全く使用せずにCSSのみでアニメーション効果をつけることができる「animate.css」というMITライセンスで配布されているスタイルシートをご紹介します。
まずは、使用準備から本家のサイトからファイルをダウンロードしてきてください。読み込むファイルは「animate.css」のみでOKです。
(※minの方でも構わないですけどカスタマイズするなら通常版にしてた方がいいです)
animate.cssを読み込む
1 | <link rel="stylesheet" href="animate.css" type="text/css"> |
今回はオンマウス時にアニメーション効果をつけようと思いますのでサンプルのソースコードは<a>を使ってください。
マークアップ
1 | <a class="animated flash" href="#">flash</a> |
class名でanimatedと使いたい効果の名前を指定するだけでOKです。でもせっかくなのでもう少し・・・。
オンマウス時に動くように設定
animate.cssの55行目近辺を見てもらうと下記のコードが見つかると思います。
1 2 3 4 5 6 | .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash;} |
これを
1 2 3 4 5 6 | .flash:hover { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash;} |
に変えるだけ、非常に簡単ですね。flash以外の効果もオンマウスにしたい場合はこちらのページの効果一覧から好きな効果の名前抽出してanimate.cssの中身を書き換えてください。
サンプルページは全部a:hoverで設定しました。見ていただいた方はわかると思うんですが6割がたa:hoverではきついですね・・・。
対応ブラウザはもちろんIEは入ってません。IEをでもという方はModernizrをつかうという話なんですが色々調べてみてまともにIEで動いてくれるものがありませんでした。
たぶん僕が間違っているんだろうとは思うんですが、申し訳ありません。IEでの対処法が分かり次第記事を追加しようと思います。
