簡単なSVGアニメーション（ロゴ画像のフェードイン）の作り方を紹介します。
マイクロインタラクションとしても使われることがあるアニメーションですが、サイトにおけるアニメーションの効果は
・現在の状態を知らせる効果
・注意喚起を促す効果
・感情に訴える効果
などがあげられます。
コーポレートサイトなどでも使われることがある会社のロゴのアニメーションを例に、ロゴ画像のSVGデータをcssで動かす方法を紹介します。
右上の「EDIT ON CODEPEN」のロゴをクリックすると、記事に埋め込まれているコードが画面いっぱいに表示されるページに遷移します。
See the Pen by haruyosih (@lvn_HO) on CodePen.
【アニメーションの説明】
文字の枠線が描かれた後、文字色が背景色から黒に変化するアニメーションです。
SVGデータの作成にはAdobe Illustratorを使用しましたが、「Vectr」や「Gravit Designer」などでも可能です。また初心者でも手軽に扱える「Method Draw」というサービスもあります。
手順
1）SVGデータの作成
アニメーションさせる対象の画像をillustratorで作成し、SVGデータとして保存します。
保存したデータは、そのままでは不要なコードが含まれているため必要な情報だけを抜き出します。SVGデータをWindowsのメモ帳などで開くと先頭に以下のコードが記載されています。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
この部分は必要ないので削除してください。最終的に必要なものは以下の <svg> ～ </svg> までになります。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 651.4 31.5" style="enable-background:new 0 0 651.4 31.5;" xml:space="preserve">
<g id="item01">
<path class="st0" d="M36,20.6H9.4L9.3,0.2c-3-0.1-6.1,0-9.2,0L0,0.3c0,0,0,27,0,29.6l0,0V30h35.9L36,20.6L36,20.6z"/>
</g>
<g id="item02">
<path class="st0" d="M47.9,0v29.7h-9.3V0H47.9z"/>
</g>
<g id="item03">
<path class="st0" d="M73.9,21.2 60.6,0 49.5,0 68.4,29.9 68.3,30 79.5,30 79.4,29.9 98.2,0 87.2,0z"/>
</g>
<g id="item04">
<path class="st0" d="M110.1,0v29.7h-9.3V0H110.1z"/>
</g>
<g id="item05">
<path class="st0" d="M122.1,29.7h-8.7V0.1h15.1l17.9,22l0.2,0.4V0.1h8.7v29.6h-15l-18-22.2l-0.1-0.3L122.1,29.7L122.1,29.7z"/>
</g>
<g id="item06">
<path class="st0" d="M189.8,7.5v2.3h6.9V0c0,0-23.5,0-29.6,0c-6.1,0-7.9,4.4-7.9,6.4s0,14,0,17.1s3.8,6.2,8.5,6.2s15.2,0,21.1,0
c5.9,0,7.9-4.6,7.9-6.7s0-11.3,0-11.3h-19.5v5.4h11.2c0,0,0,3.3,0,4s0,1.3-1.9,1.3c-1.9,0-15.3-0.1-17.1-0.1c-1.8,0-2.3-1-2.3-2
s0-8.7,0-10.5s0.7-2.3,2.2-2.3S189.8,7.5,189.8,7.5z"/>
</g>
<g id="item07">
<path class="st0" d="M231.7,30.1h-9.3V7.3h-13V0.4h35v6.9h-12.6L231.7,30.1C231.8,30.1,231.7,30.1,231.7,30.1z"/>
</g>
<g id="item08">
<path class="st0" d="M279.9,23.2v6.9h-32.6V0.4h32.6v6.9h-23.3v5h21.9v6h-21.9v4.9L279.9,23.2L279.9,23.2z"/>
</g>
<g id="item09">
<path class="st0" d="M318.4,11V3.7l0,0V0.4c-11.9,0-20.4,0-25.6,0c-3.3,0-5.7,0.7-7.3,2.1c-1.6,1.4-2.4,3.4-2.4,6.2c0,0.1,0,1.5,0,4.3v4.7
c0,2.8,0,4.2,0,4.3c0,2.7,0.8,4.7,2.4,6.1s4,2.1,7.3,2.1c5.1,0,13.6,0,25.6,0v-3.4l0,0v-7.3c-2.5,0-4.8,0-6.9,0V23
c-10.6,0-16.5,0-17.6,0c-0.9,0-1.6-0.2-2-0.5s-0.6-0.8-0.6-1.3l-0.1-2.3v-7l0.1-2.5c0-0.5,0.2-0.8,0.6-1.1s1.1-0.5,2-0.5
c1.2,0,7,0,17.6,0v3.3C313.6,11,315.9,11,318.4,11z"/>
</g>
<g id="item10">
<path class="st0" d="M330.9,19v11.1h-9.3V0.4h9.3v10.7h19.8V0.4h9.3v29.7h-9.3V19H330.9z"/>
</g>
<g id="item11">
<path class="st0" d="M371.9,30h-8.7V0.4h15.1l17.9,22l0.2,0.4V0.4h8.7V30h-15l-18-22.2L372,7.5V30H371.9z"/>
</g>
<g id="item12">
<path class="st0" d="M408.3,7.9c0-1.2,0.1-2.2,0.4-3s0.8-1.5,1.6-2.2c0.7-0.7,1.4-1.2,2.2-1.5c0.8-0.4,1.8-0.6,3-0.8
s2.7-0.2,4.4-0.3c1.7,0,4.4-0.1,7.9-0.1c3.6,0,6.2,0,7.9,0.1c1.7,0,3.2,0.1,4.4,0.3c1.2,0.2,2.2,0.4,3,0.8s1.5,0.9,2.2,1.5
c0.8,0.7,1.3,1.4,1.6,2.2c0.3,0.8,0.4,1.8,0.4,3v4.3c0,3.9,0,7.3,0,10.2c0,1.2-0.1,2.2-0.4,3.1s-0.8,1.6-1.6,2.3
c-0.7,0.6-1.4,1.1-2.2,1.5c-0.8,0.3-1.8,0.6-3.1,0.8c-1.2,0.2-2.7,0.3-4.5,0.3s-4.4,0.1-7.8,0.1s-6,0-7.8-0.1s-3.3-0.2-4.5-0.3
c-1.2-0.2-2.2-0.4-3-0.8c-0.8-0.3-1.5-0.8-2.2-1.5c-0.8-0.7-1.3-1.4-1.6-2.3s-0.4-1.9-0.4-3.1V7.9H408.3z M416.7,21.2
c0,0.6,0.2,1.1,0.6,1.3s1.1,0.4,2.2,0.4c1.4,0,7,0,16.8,0c1,0,1.7-0.2,2.2-0.5s0.7-0.7,0.7-1.2v-3.4V9.2c0-0.7-0.2-1.2-0.6-1.4
c-0.4-0.3-1.1-0.4-2.2-0.4c-1.4,0-7,0-16.9,0c-1,0-1.7,0.2-2.1,0.5c-0.4,0.3-0.6,0.8-0.6,1.3v12H416.7z"/>
</g>
<g id="item13">
<path class="st0" d="M479.6,22.9v7.2h-19.4h-9.4h-0.5V0.4h9.3v22.5H479.6z"/>
</g>
<g id="item14">
<path class="st0" d="M482,7.9c0-1.2,0.1-2.2,0.4-3s0.8-1.5,1.6-2.2c0.7-0.7,1.4-1.2,2.2-1.5c0.8-0.4,1.8-0.6,3-0.8s2.7-0.2,4.4-0.3
c1.7,0,4.4-0.1,7.9-0.1c3.6,0,6.2,0,7.9,0.1c1.7,0,3.2,0.1,4.4,0.3s2.2,0.4,3,0.8s1.5,0.9,2.2,1.5c0.8,0.7,1.3,1.4,1.6,2.2
s0.4,1.8,0.4,3v4.3c0,3.9,0,7.3,0,10.2c0,1.2-0.1,2.2-0.4,3.1s-0.8,1.6-1.6,2.3c-0.7,0.6-1.4,1.1-2.2,1.5c-0.8,0.3-1.8,0.6-3.1,0.8
c-1.2,0.2-2.7,0.3-4.5,0.3s-4.4,0.1-7.8,0.1s-6,0-7.8-0.1s-3.3-0.2-4.5-0.3c-1.2-0.2-2.2-0.4-3-0.8c-0.8-0.3-1.5-0.8-2.2-1.5
c-0.8-0.7-1.3-1.4-1.6-2.3s-0.4-1.9-0.4-3.1L482,7.9L482,7.9z M490.3,21.2c0,0.6,0.2,1.1,0.6,1.3s1.1,0.4,2.2,0.4c1.4,0,7,0,16.8,0
c1,0,1.7-0.2,2.2-0.5s0.7-0.7,0.7-1.2v-3.4V9.2c0-0.7-0.2-1.2-0.6-1.4c-0.4-0.3-1.1-0.4-2.2-0.4c-1.4,0-7,0-16.9,0
c-1,0-1.7,0.2-2.1,0.5c-0.4,0.3-0.6,0.8-0.6,1.3v12H490.3z"/>
</g>
<g id="item15">
<path class="st0" d="M554.9,7.5v2.3h6.9V0c0,0-23.5,0-29.6,0s-7.9,4.4-7.9,6.4s0,14,0,17.1s3.8,6.2,8.5,6.2s15.2,0,21.1,0c5.9,0,7.9-4.6,7.9-6.7s0-11.3,0-11.3h-19.5v5.4h11.2c0,0,0,3.3,0,4s0,1.3-1.9,1.3c-1.9,0-15.3-0.1-17.1-0.1s-2.3-1-2.3-2s0-8.7,0-10.5s0.7-2.3,2.2-2.3S554.9,7.5,554.9,7.5z"/>
</g>
<g id="item16">
<path class="st0" d="M574.5,0.3V30h-9.3V0.3H574.5z"/>
</g>
<g id="item17">
<path class="st0" d="M577.9,0.3V30h0.6h32v-6.9v-2.7c-2.5,0-4.8,0-6.9,0v2.7h-16.4v-4.9h21.9v-6h-21.9v-5h16.4v2.7h6.9V7.2V0.3H577.9L577.9,0.3z"/>
</g>
<g id="item18">
<path class="st0" d="M649.2,15.2c-1.1-1.9-3.1-2.9-5.8-3c-0.5,0-1.2-0.1-2-0.1s-1.8-0.1-3-0.1s-3.3-0.1-6.3-0.2c-2.2-0.1-3.5-0.1-4-0.2c-0.2,0-0.4,0-0.8,0h-0.8c-1.2,0-2.2-0.2-2.8-0.5c-0.7-0.3-1-0.9-1-1.9c0-0.5,0.1-1,0.3-1.3c0.2-0.3,0.5-0.6,0.9-0.7c0.4-0.2,0.7-0.3,1.1-0.3s0.9-0.1,1.4-0.1c0.4,0,5.8,0,16,0v3.4c2.1,0,4.4,0,6.9,0V6.8l0,0V0.4c-14.9,0-24.2,0-27.9,0c-2.7,0-4.7,0.8-5.9,2.3s-1.8,3.8-1.8,6.9c0,2.5,0.4,4.4,1.3,5.6c1.2,1.7,3.2,2.6,6,2.8c0.6,0.1,1.2,0.1,2,0.1s1.6,0.1,2.5,0.1s3.1,0.1,6.5,0.2c2.2,0.1,3.6,0.1,4,0.2c0.8,0,1.4,0,2,0.1c0.5,0,1.1,0.1,1.6,0.3c0.5,0.2,0.9,0.4,1.2,0.8s0.5,0.9,0.5,1.5c0,0.5-0.1,1-0.3,1.3s-0.5,0.6-0.9,0.7c-0.4,0.2-0.8,0.3-1.2,0.3c-0.4,0.1-0.9,0.1-1.5,0.1c-0.4,0-5.8,0-16,0v-3.1c-2.5,0-4.8,0-6.9,0v3.1v4.2v2.2c14.2,0,23.2,0,26.9,0c3.2,0,5.4-0.7,6.9-2.2c1.4-1.4,2.1-3.8,2.1-7C650.4,18.7,650,16.7,649.2,15.2z"/>
</g>
</svg>
svgタグについて簡単に解説します。
svgタグ：SVGを格納するための要素です。
svgタグには属性を指定する以下のコードを必ず記載してください。xmlns=”http://www.w3.org/2000/svg”
これはsvg名前空間宣言と呼ばれ、svg（xml派生言語）のルールの中で書くことを宣言し、<svg xmlns=”http://www.w3.org/2000/svg”>～</svg> と記述することで、svgタグで囲まれた中がそのルールの適応範囲となります。
viewBox=”x（左上のx座標）, y（左上のy座標）, width（画像の幅）, height（画像の高さ）”：オブジェクトの位置と大きさの情報を記載します。
gタグ：オブジェクトをグループ化するためのタグになります。
pathタグ：d属性の中のパスデータを基に図形を描画するタグです。
2）cssアニメーションの指定
cssでアニメーションをつけていきます。今回は以下のようなcssを記述しました。
.st0{ fill:#000;}
.st0{
stroke:#000;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
stroke-width: 1;
-webkit-animation: lvnlogo 4s ease-in 0s;
animation: lvnlogo 4s ease-in 0s;
}
@-webkit-keyframes lvnlogo {
0% {
stroke-dashoffset: 2000;
fill:transparent;
}
40% {
stroke-dashoffset: 2000;
fill:transparent;
}
50% {
fill:transparent;
}
100% {
stroke-dashoffset: 0;
fill:#000;
}
}
【SVGのプロパティ】
| プロパティ | 説明 |
|---|---|
| fill | オブジェクトの内部の色を指定します。 |
| stroke | オブジェクトを囲む線の色を指定します。 |
| stroke-dasharra | 線の間隔を指定します。1pxと指定すると1pxの線のあとに1pxの隙間、というように等間隔で線が表示されます。破線にしたくない場合は数値を大きくします。枠線の長さは文字によってちがうので、枠線が一番長そうな文字（今回はG）の枠線が実線になるような数値をいれます。 |
| stroke-dashoffset | 線の始まりの位置を指定します。数値を入れるともとのパス情報の位置から指定した数値分、位置が移動し、もとのパスの位置からズレた分は非表示になります。0に指定すると元のパス情報の開始位置と同じから線が描画されます。 |
| stroke-width | 線幅を指定します。 |
| animation | animationの8つのプロパティを一括で指定するショートハンドのプロパティです。 |
【cssのanimaionのプロパティ】
上記svgのプロパティに記載するanimaionプロパティは以下の8つのプロパティを一括記載するショートハンドです。
animationの後に上記の各プロパティの値を半角スペース区切って記載します。設定する必要がない値（初期値のままでいい場合）は省略できます。
animation: lvnlogo 4s ease-in 0 では4つのプロパティを指定し、他は初期値のままになります。
アニメーション名：lvnlogo
アニメーションの開始から終了までの時間：4秒
アニメーションの進行の度合い： ease-in（開始時と終了時が緩やかに変化）
アニメーションが始まる時間を指定：0秒
ページを読み込んでから0秒後にlvnlogoという名前のアニメーションを4秒かけて実行するという意味です。
| プロパティ | 説明 |
|---|---|
| animation-name | アニメーションの名前を指定 |
| animation-duration | アニメーションの開始から終了までの時間を指定 |
| animation-timing-function | アニメーションの進行の度合いを指定 |
| animation | アニメーションが始まる時間を指定 |
| animation-iteration-count | アニメーションの繰り返し回数を指定 |
| animation-direction | アニメーションの再生方向を指定 |
| animation-fill-mode | アニメーションの開始前、終了後のスタイルを指定 |
| animation-play-state | アニメーションの再生・停止を指定 |
@keyframe について
@keyframe はアニメーションの開始から終了するまでをどのようにアニメーションさせるか指定するためのCSSの文法です。
アニメーションの開始を「0%」、終了を「100%」とした場合のプロパティの変化を下記のように記載します。
@-webkit-keyframes lvnlogo {
0% {
stroke-dashoffset: 2000;
fill:transparent;
}
50% {
stroke-dashoffset: 2000;
fill:transparent;
}
100% {
stroke-dashoffset: 0;
fill:#000;
}
}
【枠線が敷かれていくアニメーションの仕組み】
①stroke-dasharray（破線の間隔を指定するプロパティ）に枠線の長さ以上の大きい値（この場合は2000）を入れることで枠線が見えない状態にしておきます。これを初期状態とします。
②stroke-dashoffset（SVG pathが始まる位置を指定するプロパティ）には、①で指定したstroke-dasharrayと同じ値（2000）を入れておきます。
③ @keyframe の指定で、stroke-dashoffsetの値を2000→0と少なくすることにより、枠線を見えない状態から少しずつ見える状態にします。
こうすることで枠線が敷かれていくアニメーションを表現します。
上記では4秒のアニメーションの間の0％～50％（0～2秒の間）では、fill（塗り）は背景色（この場合は白）のままで線のアニメーションが実行され、51％～100％（残り2秒）では、文字の塗りを黒（#000）く表示させるというアニメーションを指定しています。
上記の例を基本として、1文字だけ色を変更したり、1文字ずつフェードインさせるなどcssの追記だけでいろいろカスタマイズすることができますので、お試しいただき魅せるサイト作りにお役立てください。