CSS3だけで実現する多彩なアニメーション「magic」
magicはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
Webページは基本的に静的で、動くものは訪問者の目を引きます。アニメーションGIF、Flash、動画などがありますが今回はユーザの操作によるインタラクティブなアニメーションを実現するmagicを紹介します。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 10.55.49.1377569297.png)
色々なパターンのアニメーションが用意されています。
それぞれのボタンを押すとアニメーションが実行されます。
magicではボタンやパネルをクリックすると裏にあるオブジェクトを表示すると言ったようなエフェクトが実現できます。magicはスタイルシートのみでアニメーションを実現しています（実行のトリガーはJavaScriptですが、クラスを追加するだけです）。技術的にも興味深いソフトウェアです。
MOONGIFTはこう見る
同様のエフェクトを使っている例としてブログのシェアボタンを隠しておいてクリックするとパネルが開いて押せるようにするといったものがあります。ソーシャルボタンのデザインは画一的でサイトの雰囲気と合わないと言った時に使うと良さそうです。
他にもクリックすると実際の価格が分かると言ったものや、一部の文字を隠したクイズでも使えるかもしれません。ちょっと情報を隠しておきたいといった時に良いでしょう。覚えておくと役立つ場面がありそうです。