CSS3を使えば簡易的なアニメーションや回転もサポートするなど、より高度な表現が自由にできるようになります。とは言え、タイミングをずらしたりするのをすべてスタイルシートで行うのは大変です。 そこでJavaScriptを使ってCSS3を出力しようと言うライブラリがAgile Css3 Engineになります。アニメーション系に強いJavaScriptライブラリです。

Agile Css3 Engineの使い方

オブジェクトの表示。画像や図形などを描けて、かつそれらをアニメーションできます。

こちらはCSSスプライトをAgile Css3 Engineから生成しています。

エンドレススクロール。上下にスクロールし続けます。

線や円などの描画も可能です。

車のアニメーション。こういったアニメーション処理が得意なようです。

ボールがアニメーションしながら図形を描きます。これらをスタイルシートだけでやるのは至難の業でしょう。

トゥイーン系のアニメーションです。

ドロー。iOS7風。

ボックスが3D空間で回転するデモです。

ムービークリップ。アニメーションです。

iPhoneを描画するデモです。

パノラマ。写真をパノラマ風に表示しています。

フォーム。3D空間をアニメーションしています。これは面白い効果ですね。ちゃんとクリックやドラッグができます。

Agile Css3 Engineはクロスプラットフォームに対応し、デスクトップからスマートフォンまで幅広く動作します。またキーフレームベースのアニメーションもサポートしています。Agile Css3 Engineを使えばCSS3を使った（CanvasやSVG、WebGLは使っていません！）アニメーション処理が手軽に実装できそうです。

Agile Css3 EngineはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Agile Css3 Engine a-jie/Agile