CSS3を使えば、様々なものが表現出来てしまうことを知ってしまった。
きっかけはこれだ。
HTMLはたったの1行。
画像やJavaScriptは一切使用せずCSSのみ。<div class="mario"></div>
と記述しただけで、こんなに素晴らしいスーパーマリオのアニメーションが出力できてしまうのだ。
どこの誰かは知らないが、よく思いついたものだ。
いつ使うかわからないが、技術としては持っておきたい。
…ということで僕は、比較的簡単にできそうなパックマンを作ってみた。
SCSSは勉強不足なので、通常のCSSで挑戦。
パックマンが口を開閉するアニメーションだけで気が狂いそうになった…。
しかし見事、1エレメントでパックマンのアニメーションを実装できた。
CSS3アニメーションはJSを使うよりも軽量にループアニメなどを実装できるので、今後の仕事にも役立つはずだ。
…多分。