web-animations-jsはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

HTML5/CSS3になってWeb上でアニメーションを表現する方法は幾つか存在します。しかしいずれの方法にしても一長一短はあり、そんな中で現在W3Cで考えられているのがWeb Animationsです。そのシミュレーション、体験ができるライブラリがweb-animations-jsになります。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-03 15.53.26.1372836046.png)
デモ。Goボタンを押します。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-03 15.53.31.1372836050.png)
信号が青になってトラックが出発しました。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-03 15.54.00.1372836054.png)
こちらは時間の経過によって画像が表示されていくデモ。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-03 15.55.38.1372836058.png)
赤と緑のボールおよび四角が動くデモです。

web-animations-jsはWeb Animationsの体験をするためのライブラリであって、実際に勧告を実装している訳ではありません。スタイル設定を書き換えてアニメーションしています。JavaScript、SVG、スタイルシートを組み合わせたアニメーションをいち早く体験してみたい方は触ってみて下さい。

MOONGIFTはこう見る

web-animations-jsによると、アニメーションの種類はCSS Transitions、CSS Animations、SVG Animations/SMILそしてrequestAnimationFrame()となっています。CSS系の場合、表現力が豊かではないことやスクリプト制御ができないのが問題とされています。SVGアニメーションは表現力が豊かである一方、複雑でありHTMLとの親和性が高くないとしています。

requestAnimationFrameはメインスレッドを使ってしまうため、ビジーだった場合に止まってしまったりします。確かにいずれの方法についても何らかの問題を抱えているのが現状かも知れません。とは言え、既に数多くのアニメーションライブラリが存在します。それらを必要に応じて選定する技術こそ必要ではないでしょうか。

web-animations/web-animations-js