SVGアニメーション8種｜CSSで動かすコピペコード+AIプロンプト

SVGは拡大しても劣化せず、CSSから直接スタイルを当てられるため、アニメーションとの相性が非常に良い形式です。ここではSVGを動かす表現を8種類集めました。線が描かれていく表現、図形が有機的に変形する表現、パスに沿って要素が走る表現まで、いずれもライブラリなしで実装できます。

SVGアニメーション · 8 EFFECTS

No.049SVG LINE DRAWCSS No.050WAVE DIVIDERCSS No.058SVG SQUIGGLE UNDERLINECSSSVG No.059SVG MARCHING ANTSCSSSVG No.074SVG SIGNATURE DRAWCSSSVG No.075SVG GAUGECSSJSSVG No.099SVG BLOB ROTATECSSSVG No.121OFFSET PATH MOTIONCSSSVG

実装の勘所

線画は stroke-dasharray と stroke-dashoffset で作る

パスの全長を stroke-dasharray に指定し、同じ値を stroke-dashoffset に入れると線が消えます。そこから dashoffset を0へアニメーションさせると、線が描かれていくように見えます。全長は JavaScript の getTotalLength() で取得するか、pathLength="1" を指定して 0〜1 で扱うと簡潔になります。

インラインSVGにする

img タグで読み込んだSVGには外部CSSが届かず、内部の path に色もアニメーションも当てられません。CSSから制御したい場合はHTMLに直接SVGを書いてください。

SMILではなくCSSかWeb Animations APIを使う

animate 要素などのSMILは非推奨扱いになった経緯があり、対応状況も不安定です。同じ表現はCSSアニメーションで実現できるため、新規実装ではそちらを選んでください。

FAQ

Q. SVGアニメーションはCSSとSMILのどちらで書くべきですか？

CSSです。SMIL（animate / animateMotion 要素）は一時期廃止が検討された経緯があり、現在も対応が不揃いです。線の描画は stroke-dashoffset、パス上の移動は offset-path で、いずれもCSSアニメーションとして書けます。CSSならイージング・遅延・prefers-reduced-motion 対応もそのまま使えます。

Q. SVGの色がCSSで変えられません。

img タグや background-image としてSVGを読み込んでいる可能性が高いです。この場合SVGは独立した文書として扱われ、親ページのCSSは届きません。HTMLに直接SVGのコードを書く（インラインSVG）と、path に fill や stroke を当てられるようになります。

Q. コードは無料で使えますか？

はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。

他のカテゴリを見る

テキストアニメーション 21 ホバーエフェクト 8 スクロールアニメーション 15 マイクロインタラクション 19 カードアニメーション 15 背景アニメーション 14 ボタンアニメーション 10 ローディングアニメーション 7 トランジション・画面遷移 9 モーダル・ドロワー 8 カーソルエフェクト 6

全139種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むならカタログ一覧、長文の解説を読むならガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装するへ。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。