CSS3でアニメーションを作ってみた

css3

動機

今年の頭にニコ動を徘徊してたら下記動画のアニメーション部分が面白い事してるなーと思って眺めてたところ、これのフェードイン、フェードアウトのエフェクト程度ならCSS3の技術使ってできるんじゃないかなーと思って試しに実装してみたのがきっかけ。

D

出来たもの

jsdo.it(http://jsdo.it/aroma_black/AtQj)に投下したものの横幅の関係で同じ色が縦一列に並ばないのでZIPを置いておきます。
動作はChrome(ver 10.0.642.2 dev)のMac, Win, Linux版で確認しています。
同じWebkitのSafariでも動くと思ったらclassList()メソッドが実装されていないらしく動きませんでした。

css3-animation-etude.zip 直

仕組み

ただ単にsetIntervalでクラス追加を行ってそのクラスにアニメーションを行う定義をしているだけです。
終了時にイベントでひろってアニメーションのクラスを外すという事をしています。

動画との違い

見た目では、

  • 元動画はフェードイン時の四角の色が少し明るい色になっている
  • 四角の中身が固定（ニコ動のは歌詞とアイコンが表示される）
  • 四角が消えるまでの時間がランダム（たぶん）
  • 元動画は6行7列

ぐらいですかね？
アイコンは適当なものが無かったため、先日公開されたW3CのCSS3のものを使ってみましたｗ

感想

去年の11月にKOF2010に行ったとき「HTML5 〜 ウェブの未来のためにいま何が必要なのか」のセッションで「HTML5とその関連技術はまだ開発環境が未成熟な為今後は環境が普及のカギになる」とおっしゃってました（どなたがおっしゃったは失念）が、全くその通りだなと痛感しました。
そこら辺と比較するとやっぱりまだFlashの方が上かなという気もします。

今後

現時点では

  • 元動画は四角の中に文字を入れてるので同様な事が出来たらいいな
  • Firefox対応

文字に関してはBPM設定して、配列にデータ突っ込んでおいてそれを順番になめていく制御スクリプトを追加ぐらいの改造でできそうなので気が向いたらやってみる。
FirefoxはCSS3のanimationが未実装らしいのでtransitionでやるしかなさそうな感じなので、まー検討レベルで。