HTML5NAGOYA #16ではテーマがSVGということで、「CSSでできるSVGアニメーション」というタイトルでお話ししてきました。

JSと比べるとCSSはブラウザ対応していないし、できるアニメーションも少ないのですが、 CSSでできたらお手軽ですよね。

どちらかというと私はJSはできないほうで、CSSでアニメーションできたらいいのにな、と日頃探している人なので、同じような人にちょっとでも面白いなと思ってもらえたら幸いです。

今回ご紹介した主なアニメーション

• トランスフォーム
• ドローイングアニメーション
• 円グラフ

トランスフォームのアニメーションについて

スライドでもご紹介しているトランスフォームのアニメーションはpngやjpegでもできたりしますが、書き出しやCSSスプライトにわけるのがとても手間がかかってしまいます。（実は、実際に趣味で制作していたのですが、途中で挫折してしまいました…。）SVGは、イラストレーターで書いて、SVGに拡張子を変換したらすでにパーツごとに分かれていて、idやclassも適応できるので比較的楽に実装できます。

写真だとか複雑なイラストなどのSVGで表現できないものはpngやjpegのほうがいいと思いますが、簡単な図形やパーツが多いものはSVGのほうがいいんではないかなと思います。

ドローイングアニメーションについて

ドローイングアニメーションについては1年ほど前の記事ですが、説明しているものがありますので、スライドではわからないという方はこちらをご覧ください。

• SVGのアニメーション | mkasumi.com

円グラフについて

円グラフは最近海外の記事やデモでいろんな人が作成しているので気になっていたアニメーションでした。こちらは主にSmashing Magazine の Designing Flexible Pie Charts With CSS and SVG の記事を参考にしたものを自分なりに解釈して今回ご紹介しました。英語ですが、こちらの記事はとてもわかりやすいのでおすすめです。

個人的には、学生の頃役には日常生活では立たないと思っていた円周率がSVGで大活躍して義務教育にありがたみを感じました。

最後に

今回はCSSでできる範囲でご紹介しましたが、やはりJSもできたほうが表現が広がります。日頃からJSも勉強したいと思っているので、再度エンジンをかけていきたい所存です！

今回発表させていただいたHTML5NAGOYAですが、次回は未定だそうです。発表者がいれば開催するそうなので、興味ある方はツイッターアカウントやGoogle グループがあるので、こちらから連絡できると思います。

それでは、この度は貴重なご機会をありがとうございました！