CSSでSVGをアニメーションする方法
例つき
HTMLにインラインで挿入したSVGは、他の要素と同様にCSSでアニメーションできます。よく使う手法を紹介します。
前提：インラインSVG
CSSが内部の図形に届くには、SVGがHTMLにインラインである必要があります（imgではない）。アニメーションしたい図形にクラスやIDを付けます。
1. 連続回転
.spin { transform-box: fill-box; transform-origin: center; animation: spin 2s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
transform-box: fill-box で自身の中心を軸に回転します。
2. 線が描かれる効果
.line { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 2s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } }
「手描き」風の効果。値は実際の線の長さに合わせます。
3. ホバーで色変更
.icon path { fill: #6c8cff; transition: fill .2s; } .icon:hover path { fill: #ff6c9c; }
4. 拡大のパルス
@keyframes pulse { 50% { transform: scale(1.15); } } .dot { transform-box: fill-box; transform-origin: center; animation: pulse 1s ease-in-out infinite; }
コツ
transformとopacityをアニメーション（最も滑らか）。- 原点を図形自身にするため
transform-box: fill-boxを使う。 - アクセシビリティのため
prefers-reduced-motionを尊重する。
SVGを準備
svgdeskで図形を作り、整理したコードの <svg> をコピーしてインラインで貼り、アニメーションします。