線の描画、ローダー、アイコンの切り替え、伸びるグラフの棒、パスのモーフィングなど、コピーできるコード付きの20のSVGアニメーション。CSS、SMIL、GSAPの比較、SVGとLottieの比較も掲載しています。
SVGアニメーションは、CSS、SMIL、JavaScriptでベクター図形を動かしたり描き直したりする技術です。CSSのキーフレームは、transform、opacity、そしてstroke-dasharrayとstroke-dashoffsetを使った線の描画テクニックを扱えます。<animate>のようなSMILのタグを使えば、スクリプトなしでパスのモーフィングやモーションパスに沿った移動ができます。GSAPなどのライブラリは、タイムラインやスクロール連動の制御を追加します。デザイナーがAfter Effectsで作ったアニメーションにはLottieが適しています。
効果ごとのテクニック
このページのアニメーションはすべて、横にあるコードからスクリプトを無効にしたフレーム内でライブ再生されています。つまり、コピーしたものはJavaScriptなしでそのまま動きます。また、システムで視差効果を減らす設定をしている訪問者に対しては、どれも停止します。上部の線描画ビルダーは、貼り付けた任意のパスに線の描画テクニックのコードを生成します。
stroke-dasharrayで線にパスと同じ長さの破線を設定し、同じ値のstroke-dashoffsetで見えない位置に押し出してから、オフセットを0までアニメーションさせます。破線が所定の位置にスライドし、線が自分で描かれていくように見えます。pathLength="1"を使えば両方の値を1にできます。
いいえ。Chromeは2015年に非推奨化の計画を発表しましたが、その後計画を中止しました。animate、animateTransform、animateMotionなどのSMIL要素は現在の主要ブラウザーすべてで動作し、SVG仕様の一部です。
一部はできます。CSSのdプロパティはpath()の値を受け付け、ChromiumブラウザーとFirefoxではアニメーションできますが、執筆時点ではSafariが対応していないため、caniuseで確認してください。両方のパスでコマンドの数と種類が同じである必要があります。d属性に対するSMILのanimateのほうが幅広く動作します。
アイコン、ローダー、コードで表現できるシンプルなイラストには、素のSVGとCSSを使いましょう。モーションデザイナーがAfter Effectsで複雑なキャラクターやシーンを作り、それを忠実に再生したい場合はLottieを使います。Lottieにはプレーヤーライブラリが必要ですが、素のSVGには不要です。
CSSアニメーションをprefers-reduced-motionのメディアクエリで囲むか、その中でアニメーションをオフにします。CSSではSMILを一時停止できないため、そのメディアクエリ内で静止版のグラフィックを表示するか、スクリプトからsvg要素のpauseAnimations()を呼び出します。
20個すべてがJavaScriptなしで動作し、視差効果を減らす設定用のルールを含んでいます。どれもその場で編集できます。
pathLength=1を使った定番の線のテクニックで、破線の値が実際の長さに左右されません。
長いパスをlinearのイージングでゆっくり描くと、ペンが動いているように見えます。
一部だけ破線にした円が回転します。transform-boxで回転の中心を保ちます。
animation-delayの値をずらすことで、1組のキーフレームが波のような動きになります。
拡大とフェードを同時に行い、レーダーやライブ表示のインジケーターにします。
各棒がそれぞれ異なる長さの時間で、底辺を基点にY軸方向へ拡大縮小します。
棒は読み込み時に1回だけ伸びます。forwardsで最終状態を保ち、視差効果を減らす設定では完成したグラフをそのまま表示します。
円に同じ破線のアイデアを使います。-90度回転させると上から始まります。
ボタンにホバーまたはフォーカスしてください。各線がtransitionで移動と回転をし、キーフレームは不要です。
素早い2回の拡大の後に休止が入り、すべてが1つのキーフレームリストに収まっています。
ChromiumとFirefoxで動作します。dに対応していない環境では図形は正方形のままです。両方のパスで同じコマンドを同じ順序で使っています。
SMILはd属性そのものを変更するため、CSSのdプロパティより幅広く対応しています。視差効果を減らす設定では静止版が表示されます。
rotate=autoにより、図形が進行方向を向くように回転します。
rotateの値では、2つ目と3つ目の数値で回転の中心点を指定します。
SMILでグラデーションのストップカラーをアニメーションさせます。stop-colorに対するCSSのキーフレームでも同じことができます。
表示領域の2倍の幅のパスがちょうど1周期分だけ左にスライドするため、ループに継ぎ目ができません。
ベルの上部を基点にした回転で、ホバーまたはキーボードのフォーカスで発動します。
破線のストロークのオフセットをアニメーションさせた、画像編集ソフトの選択範囲のような見た目です。
曲線上の短い破線が絶えず動き、方向を示します。
着地時につぶれることで重さが伝わります。transform-originを下端にすると、つぶれている間もボールが床に接したままになります。
SVGをアニメーションさせる3つの方法
デモのフレームではスクリプトが無効なので、コードのみです。GSAPは独自のライセンス（MITではありません）の下で無料で使えるため、公開前に利用規約を読んでください。
星
波
家
もう一度再生
お使いのシステムで視差効果を減らす設定がされているため、完成した図を表示しています。「もう一度再生」を押すと1回だけ再生します。
パスデータ（d属性）
再生時間：{n}s
線の太さ：{n}
イージング
色
SVGとCSS
コードをコピー
無料で始める · クレジットカード不要