CSS3で作られた音声付きアニメーション「The Good Man」
The Good Manはスーパーマンを題材にしたCSS3アニメーションです。
2013年、スーパーマンの新作であるマン・オブ・スティールが公開されます。スーパーマン誕生を描いた本作を表現しているかのようなCSS3アニメーションとしてThe Good Manを紹介します。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-16 10.30.19.1358309133.png)
トップページです。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-16 10.31.06.1358309137.png)
字幕付きです。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-16 10.31.12.1358309141.png)
滑らかなアニメーションです。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-16 10.31.56.1358309144.png)
結構長いです。
The Good ManはCSS3アニメーションによる実験的位置づけのプロジェクトです。画像は使っておらず、全てテキストとCSS、そしてWeb Fontで表現されています。音声や字幕付きなど面白い試みが随所に行われています。
The Good ManはCSS3/JavaScript製、Creative Commonsのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
CSS3によるアニメーションはまだまだ実験的試みが多く、実用レベルにはなっていません。しかしHTML5が普及するのに合わせて、徐々に利用は拡大されていくでしょう。画像での表現とはまた異なる面白い効果が望めるでしょう。
特にJavaScriptと組み合わせることで形状を滑らかに変化させたり、色を変えることもできます。ユーザアクションと連動したアニメーションも作れるでしょう。作品の作り手としても、フレームワークの開発者としても面白そうなテーマです。