[CSS]デモが楽しい！要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic

Post on:2014年4月10日

sponsors

要素をアニメーションでスライドさせたり、ペラッとめくったり、ワイプさせたり、回転させたり、フェードさせたり、ぶるぶる震えさせたり、さまざまなエフェクトをclassを与えるだけで適用するスタイルシートを紹介します。

この宇宙っぽい絵面がワクワク感を高めますねｗ

Magicのデモ

Magic デモページ
※音がでます（音無しは右上をクリック）

デモでは右側からアクションを選択すると、左側にあるレッドの矩形がアニメーションします。
アニメーションは、下記のようにさまざまなものが揃っています。

Magic effects, Bing, Static effects

Static effects out, Perspective, Rotato

Slide, Math, Tin, Bomb

当スタイルシートを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="yourpath/magic.css">
</head>

アニメーションはmagic.css単体で動作しますが、jQueryと組み合わせることでユーザーのさまざまなアクションをトリガーにすることができます。

まずはjQueryのセレクタで要素を指定し、例えばホバー時にアニメーションさせる時はこんな感じに。

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

特定の時間、ループでアニメーションさせる時はこんな感じ。

setInterval(function(){ 
    $('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );