最近のWebサイトにはいろいろなアニメーションが入っていたりします。
読み込みの待ち時間に出てくるローディング画面や、ボタンにポインターを合わせると形状が変わったり、画像をふわっと表示したりと、よりWebページを楽しく閲覧できるようになっています。
適度なアニメーションは、UX（ユーザー体験）向上にも繋がりますが、必要ではない要素などに多用すると、かえってコンテンツの内容が入ってこなかったりなど、注意も必要です。
訴求のポイントや、操作や読み込みに関する箇所に使うとよいかもしれません。
今回はSVGでのアニメーションを試してみたいと思います。
●SVGとは
SVGとは、JPEGや、PNG、GIFなどの画像フォーマットの一種で、拡大してもカクカクとシャギらないベクター画像です。
（このあたりの話はまた次回にでもご紹介します。）
点と点の座標データを持っており、その点を線で結ぶ事で表示されるので、Retinaディスプレイなどの高解像度のモニタで見ても綺麗です。
おおよそ単純な作りのアイコンやロゴなどに向いています。
いろいろ試してみたいと思います。
■線で描くストロークアニメーション
ブラウザで拡大(ctrl + +)してみると、分かるのですが、通常の画像みたいにカクカクしたりしません。
スマートフォンやPCなど、端末が変わっても、綺麗に表示されます。
■回転系アニメーション
■移動 ＋ フェードアニメーション
■拡大縮小 ＋ フェードアニメーション
アニメーションが発動するタイミングも、ページの読み込み時、スクロール表示時、クリック時、ポインターをあわせた時など設定する事が可能です。
効果的に適度なアニメーションを施し、Webサイトの表現力を広げていきましょう。
