CSS3キーフレームアニメーションをJavaScriptで追加、編集「css-animations.js」
css-animations.jsはCSS3キーフレームアニメーションを制御するJavaScriptライブラリです。
CSS3にはキーフレームアニメーションがあります。簡単なアニメーションであればCSSだけで実現できます。そんなキーフレームアニメーションの動作を制御できるJavaScriptライブラリがcss-animations.jsです。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-22 9.37.14.1358860379.png)
CSS3の@keyframesでアニメーションを制御しています。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-22 9.37.33.1358860383.png)
JavaScriptでアニメーションを追加することもできます。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-22 9.38.05.1358860386.png)
こちらはCSSなし、JavaScriptのみでキーフレームを作成しています。
CSS3だけで全てを行おうと思うと書き方が冗長的になったり、一つのDOMに一つのアニメーションしか付けられずに不便な思いをするかも知れません。JavaScriptと組み合わせることで他の入力状態などによって動きが制御できるようになるので、より利用できる幅が広がりそうです。
css-animations.jsはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
CSSだけであってもチェックボックスを使うとcheckedになっている場合だけ制御を変えたりすることもできます。どこまでCSSだけでできるのか挑戦してみるのもそれはそれで面白いでしょう。とは言えそれは個人プロジェクトの場合です。
会社で取り組む場合は、よりメンテナンスしやすかったり開発しやすい形を模索する必要があります。何でもJavaScript、何でもスタイルシートではなく、その特性を見極めた上で最適な技術の組み合わせを模索する必要があるでしょう。