アニメーションは一コマ一コマ指定しながら作成することもできますが、作成に時間がかかります。それに対してキーフレームを指定して、そこへの変化（または移動）を指定する方式はコンピュータ側でアニメーションを補完してくれる分、効率的にアニメーションが作成できます。 今回紹介するcss-keyframer.jsはそんなキーフレームアニメーションをCSSのように指定できるソフトウェアです。

css-keyframer.jsの使い方

デモです。JavaScriptの中にCSS風にアニメーションを指定しています。複数のエフェクトが指定できます。

実際のアニメーションです。形を変えつつ、回転しつつ、さらに色が変わります。

css-keyframer.jsではCSS3で指定できるスタイル設定を、時間を変化させながら適用できます。例えば四角がいきなり角丸になるのではなく、徐々に変化していくことでユーザの目を引くことができるでしょう。

css-keyframer.jsはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。

css-keyframer.js tsuyoshiwada/css-keyframer: Dynamic css animation keyframes Manipulation library.