CSS3になって表現力が広がっています。これまでFlashやJavaScriptを駆使しないとできなかったことが、スタイルシートだけで実現できるようになっています。スタイルシートを使えばGPUを使うのでより滑らかに表現できます。 今回はTextillate.js、CSS3を使ってテキストアニメーションソフトウェアを紹介します。

Textillate.jsの使い方

Textillate.jsの例です。表示される時、非表示になる時のアニメーションをそれぞれ指定できます。

それぞれ十数種類の表示/非表示アニメーションが指定できます。

Textillate.jsでの実際のアニメーション実行はJavaScriptを使っています。そのためJavaScriptがオフになっている時には使えないのが難点ですが、ユーザのボタンクリック時やDOMが表示されたタイミングなどでアニメーションを実行できるでしょう。

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

Textillate.js jschr/textillate: A simple plugin for CSS3 text animations