ダイナミックなアニメーションを実現する「Anima」
AnimaはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。
CSS3になって、スタイルシートを駆使すれば華麗なアニメーションが実現できるようになってきました。しかしそこには限界もあります。そこでより本格的なアニメーションを作り上げたいと考える方はAnimaをベースにしてみると良さそうです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.03.48.1371019245.png)
元素記号が踊るアニメーションです。3Dになっており、視点を変えられます。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.03.53.1371019251.png)
奥に傾けたり…
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.03.58.1371019255.png)
右側を奥にしたりできます。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.04.07.1371019266.png)
ボールがバウンドします。徐々にバウンドが緩んでいくアニメーションをスタイルシートで実現しています。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.04.12.1371019270.png)
これだけでは分かりづらいのですが、右から左へバウンドしながら跳ねていきます。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.04.26.1371019274.png)
遅延を使ってシーンごとのアニメーションを実現しています。
AnimaはCSS3ベースのアニメーションに対して実行や停止、そのイフェクトをJavaScriptを使って指定できるようになっています。スタイルシートだけでは制御しきれない部分についてJavaScriptで補完できる便利なライブラリと言えそうです。
MOONGIFTはこう見る
様々な技術が存在する中で、個々の技術が発展していくと相互に被る機能が現れます。CSS3で実現する機能の幾つかはJavaScriptを駆使すればできるものも、その逆もあるでしょう。大事なのは特定の技術に固執する事なく、最適な技術選択を行う眼です。
例えばJavaScriptで実現するアニメーション処理はCPUパワーを使います。CSS3でGPUを使うようにした方が滑らかで消費電力も少なくて済みます。そうした技術の補完によってよりユーザストレスの少ない表現が得られるはずです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.03.48.1371019277.png)