CSSとSMILによるSVGアニメーション
CSSトランジションとSMILでSVG要素に動きを加えます
「CSSとSMILによるSVGアニメーション」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
SVGのCSSトランジション
SVGのプレゼンテーション属性（fill、stroke、opacity、transform）は、CSSトランジションでアニメーションできます。クラスを追加してトランジションを定義します。.icon { transition: fill 200ms ease; } .icon:hover { fill: red; }。CSSトランジションはHTML要素と同じようにSVG要素でも機能します。
SVGのCSSキーフレームアニメーション
SVG要素に@keyframesを適用できます。パス描画エフェクトにはstroke-dashoffset、フェードインにはopacity、移動や回転にはtransformをアニメーションさせます。HTML要素で使用するものと同じアニメーション構文を、変更せずにSVG要素へ適用できます。
@keyframes draw {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }パス描画エフェクト
stroke-dasharrayとstroke-dashoffsetの手法で、パスを描いているように見せられます。dasharrayをパスの長さと同じ値に設定し、dashoffsetをパスの長さに設定して非表示にします。その後、dashoffsetを0までアニメーションさせます。これにより、線が始点から終点まで描かれていくように見えます。
パスの長さの取得
path.getTotalLength()は、SVGのユーザー単位でパスの長さを返します。この値をstroke-dasharrayと開始時のstroke-dashoffsetの両方に使用します。これにより、パスの複雑さや長さに関係なく、アニメーションが正しく機能します。
SVGのCSS transform
最新のブラウザーは、SVG要素に対するCSS transformをサポートしています。SVG要素では、transform-originのデフォルトがSVGの左上隅になります。HTMLのように要素の中央がデフォルトになるわけではありません。transform-originを要素のバウンディングボックス基準にするには、transform-box: fill-boxを指定します。
.spinner {
transform-box: fill-box;
transform-origin: center;
animation: rotate 1s linear infinite;
}SMILアニメーション
SMIL（Synchronized Multimedia Integration Language）は、SVGに組み込まれたアニメーションシステムです。animate要素によって、属性値を時間の経過に合わせて変更します。SMILにはJavaScriptもCSSも必要なく、SVGのマークアップ内でアニメーションを完全に宣言的に定義できます。
<circle r="20">
<animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
</circle>animateTransform
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite">は、SMIL構文を使用して、指定した中心点を基準に要素を回転させます。
animateMotion
<animateMotion>は、SVGのパスに沿って要素を移動させます。mpathでパスを参照するか、パスデータをインラインで指定します。要素はパスの曲線に沿って自動的に移動するため、座標を手動で計算せずに複雑なモーションパスを実現できます。
CSSとSMILのトレードオフ
CSSアニメーションは、すべての最新ブラウザーでサポートされ、CSSカスケードと統合でき、JavaScriptから一時停止や逆再生を簡単に制御できます。SMILはSVGマークアップ内で完結し、CSSにアクセスできない静的SVGファイルでも動作します。また、パスに沿ったアニメーションを宣言的かつ柔軟に定義できます。
SVGパスのモーフィング
2つのパス形状の間をアニメーションさせるには、コマンド数が同じで、構造に互換性がなければなりません。CSSアニメーションではdプロパティをアニメーションできます（Chrome 88以降、Firefox 72以降）。@keyframes { to { d: path("M...") } }を使用すると、CSSだけでネイティブなパスのモーフィングを実現できます。
SVGアニメーションのアクセシビリティ
動きを不快に感じるユーザーのために、prefers-reduced-motionメディアクエリーを追加して、SVGアニメーションを無効化または簡略化します。装飾目的のアニメーションは完全に無効化し、意味のあるアニメーション（読み込み状態など）は停止するのではなく簡略化してください。
理解度チェック
stroke-dasharrayとstroke-dashoffsetの手法によって、どのようにパス描画アニメーションを作成できますか？
まとめ
SVGのアニメーションでは、プロパティベースのエフェクトにCSSトランジションとキーフレームを使用し、パス描画にはstroke-dasharrayとdashoffsetの手法を使用します。また、SVG内で宣言的なアニメーションを行うにはSMILのanimate、animateTransform、animateMotionを使用し、アクセシビリティにはprefers-reduced-motionを使用します。CSSとSMILは相補的な関係にあり、SVGをCSSカスケードと統合する必要があるか、単独ファイルとしての可搬性を重視するかに応じて選択します。
よくある質問
「CSSとSMILによるSVGアニメーション」レッスンは無料ですか？
はい。「CSSとSMILによるSVGアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「CSSとSMILによるSVGアニメーション」で何を学びますか？
CSSトランジションとSMILでSVG要素に動きを加えます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「CSSとSMILによるSVGアニメーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- インラインSVGとimg・objectの比較
- SVGの基本図形 rect circle path
- SVGのviewBoxとレスポンシブな拡大縮小
- CSSとSMILによるSVGアニメーション