要素にブルブル震えるアニメーションを加えることができるCSSライブラリ「CSS Shake」

CSS Shakeは、ブルブルと震えるアニメーションをつけることができるCSSライブラリです。

スタイルシートをロードして、要素にクラスを追加するだけで、簡単にアニメーションを実装することができます。

CSS Shakeでアニメーションをつける方法

CSS Shakeの実装手順は以下の通りです。

1. CSS Shakeからスタイルシートをダウンロードします。
※Downloadボタンを右クリックして、[名前を付けてリンク先を保存]します。

2. ダウンロードしたcsshake.min.cssをサーバーにアップロードします。
3. HTMLのhead内に以下のコードを記述して、CSS Shakeをロードします。

<link type="text/css" href="csshake.css">

4. ブルブルしたい要素にクラスを追加します。

<div class="shake"></div>

このように、CSS Shakeを使えば、簡単にブルブルするアニメーションを加えることができます。

追加できるクラスについて

追加できるクラスは、以下の9種類が用意されています。

shake：デフォルトのアニメーション
shake-hard：激しくブルブル
shake-slow：ゆっくりブルブル
shake-little：小さくブルブル
shake-horizontal：横にブルブル
shake-vertical：縦にブルブル
shake-rotate：角度を変えてブルブル
shake-opacity：透明度を変えてブルブル
shake-crazy：クレイジーなブルブル

実際に要素にクラスを追加してみると、以下のようになります。

<div class="shake">デフォルトのアニメーション</div>
<div class="shake shake-hard">激しくブルブル</div>
<div class="shake shake-slow">ゆっくりブルブル</div>
<div class="shake shake-little">小さくブルブル</div>
<div class="shake shake-horizontal">横にブルブル</div>
<div class="shake shake-vertical">縦にブルブル</div>
<div class="shake shake-rotate">角度を変えてブルブル</div>
<div class="shake shake-opacity">透明度を変えてブルブル</div>
<div class="shake shake-crazy">クレイジーなブルブル</div>

通常はマウスホバーしたらアニメーションが開始されますが、何もしなくてもブルブルさせたい場合は「shake-constant」を追加します。

<div class="shake shake-constant">何もしなくてもブルブル</div>

マウスホバーした時にブルブルを停止したい場合は、「hover-stop」を追加します。

<div class="shake shake-constant hover-stop">マウスホバーで停止</div>

また、アニメーションを停止した時に、要素を停止した位置に留めたい場合は、「freez」を追加します。通常はアニメーションが開始される前の位置に戻ります。

<div class="shake freez"></div>

各アニメーションの動きと追加するクラスについての詳細は、デモページでご確認ください。

あとがき

言葉で説明しても伝わりにくいですね・・・当ブログのヘッダー部分にあるソーシャルアイコンにもCSS Shakeを実装していますので、ぜひマウスホバーしてみてください。「freez」はFacebookに実装しています。