「CSSでできるSVGアニメーション」HTML5NAGOYA #16でお話しました

写真:HTML5名古屋勉強会風景

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

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

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

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

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

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

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

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

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

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

円グラフについて

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

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


最後に

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

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

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


関連タグ

この記事をシェアする

著者

デザイナー

森田かすみ

名古屋のスタートアップで働く、デジタルプロダクトデザイナー。

2013年に新卒でWeb制作会社に入社し、受託制作のマークアップエンジニアとして勤務した後、CMS開発部門のデザイナーへ転身。

2023年5月にSaaSのプロダクトデザイナーへ転身。
現在は新機能にまつわるUXを考慮したUI設計、機能マーケティング支援などを担当。
ストレス発散方法はかっぱのイラストを描くこと。

おすすめ記事

この記事のハッシュタグ から関連する記事を表示しています。

他の方法で記事を探す

2024年12月

年間カレンダーへ
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31