最近のWebサイトにはいろいろなアニメーションが入っていたりします。

読み込みの待ち時間に出てくるローディング画面や、ボタンにポインターを合わせると形状が変わったり、画像をふわっと表示したりと、よりWebページを楽しく閲覧できるようになっています。

適度なアニメーションは、UX（ユーザー体験）向上にも繋がりますが、必要ではない要素などに多用すると、かえってコンテンツの内容が入ってこなかったりなど、注意も必要です。
訴求のポイントや、操作や読み込みに関する箇所に使うとよいかもしれません。

今回はSVGでのアニメーションを試してみたいと思います。

●SVGとは
SVGとは、JPEGや、PNG、GIFなどの画像フォーマットの一種で、拡大してもカクカクとシャギらないベクター画像です。
（このあたりの話はまた次回にでもご紹介します。）

点と点の座標データを持っており、その点を線で結ぶ事で表示されるので、Retinaディスプレイなどの高解像度のモニタで見ても綺麗です。
おおよそ単純な作りのアイコンやロゴなどに向いています。

いろいろ試してみたいと思います。

■線で描くストロークアニメーション

ブラウザで拡大(ctrl + +)してみると、分かるのですが、通常の画像みたいにカクカクしたりしません。
スマートフォンやPCなど、端末が変わっても、綺麗に表示されます。

■回転系アニメーション

■移動 ＋ フェードアニメーション

■拡大縮小 ＋ フェードアニメーション

アニメーションが発動するタイミングも、ページの読み込み時、スクロール表示時、クリック時、ポインターをあわせた時など設定する事が可能です。

効果的に適度なアニメーションを施し、Webサイトの表現力を広げていきましょう。