SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう(参考「SVGで始めるマイクロインタラクション入門」)。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法(コーダー向け) コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
![UI改善にキラリと役立つ! SVGアニメーションの作り方まとめ - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9138dec697f17ca1f013626834ba4ec44bc8800/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F15970%2Fimages%2Feyecatch.png)