CSS3を使えばアニメーションも実現できますが、敷居はまだ高いように思います。せっかくの機能が使われないのは非常に勿体ない訳で、一つのライブラリとして提供されれば使いやすくなるのではないでしょうか。 ということで今回はCSS Shakeを紹介します。CSS3を使ってシェイクジェスチャーを実現するアニメーションライブラリです。

CSS Shakeのデモ

というわけでデモ動画です。

見事にシェイクされているのが分かります。

CSS Shakeの使い方

CSS Shakeは幾つかのクラスを定義しています。まずはスタイルシートを読み込みます。

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

これで準備完了です。基本形は次のようになります。

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

ハードなシェイクはshare-hardを追加します。

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

こんな感じで、

• shake-slow
• shake-little
• shake-horizontal
• shake-vertical
• shake-rotate
• shake-opacity
• shake shake-crazy

などが定義されています。

マウスオーバーでちょこっと揺らしてみたり、通知がきたタイミングでアイコンを揺らしたりするのは面白いかも知れません。変化に気付いて欲しいコンテンツを表示する際に使えそうですね。

CSS ShakeはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。

CSS Shake