CSSとSVGで簡単にラインアニメーションを作る方法【Illustrator初心者向け】

2018/5/16 2019/10/31

この記事は最終更新から4年以上が経過しています。情報が古くなっている可能性があります。

以前はsvg単体のアニメーションを作りましたが(「【SMIL】SVGアニメーションでsvgのキャラ画像を動かそう！」)、今度は前々から気になっていた文字を書くラインアニメーションを調べてみました。

ということで、svgとcssを使った、Illustrator初心者でも簡単に作れるラインアニメーションをご紹介します！

Contents

1 目標物
2 手順
- 2.1 SVG画像を用意する
- 2.2 cssでアニメーションさせる
3 おまけ
- 3.1 一筆書き失敗例
- 3.2 色々作ってみた

目標物

作り方はこちらのサイトを参考にさせていただきました。

SVGとCSS3でできる筆記体のアニメーションをやってみる

今回の目標物はこちら。

See the Pen css&svgアニメーション by BICOxxx (@BICOxxx) on CodePen.

理想は一筆書きアニメーションだったんですが、繊細なパス遣いが求められてしまうため、とにかくラインアニメーションさせたい！という方はこちらがおすすめです。
一筆書きの作り方についても少し触れていきます！

手順

SVG画像を用意する

1. Illustratorでアートボードを作成する
アートボードのサイズは、これから入力するテキストエリアの横幅ぴったりのサイズにしましょう。

2. アニメーションさせたいテキストを入力

3. テキストを選択している状態で、表示 > アウトラインを選択

4. テキストの上で右クリックし「アウトラインを作成」を選択

5. オブジェクト > パス > 単純化から、なるべくパスを減らしつつフォントの印象が変わらない程度に曲線精度を下げる

↓

閾値0・曲線精度80％にした場合

＊POINT
ここのパスの数が重要！cssでアニメーションさせる際は、パス単位になります。
そのため一筆書きアニメーションにしたい場合はパスを1つにする必要があり、フォントをパスでトレースしていく感じになります。

6. 終わったらSVG形式でファイルを保存する

svgファイル
今のところこんな感じになりました。

cssでアニメーションさせる

次にcssで先ほどのSVGファイルをアニメーションさせていきます。

1. SVGファイルをテキストエディタで開き、<svg>〜<svg>部分をコピーして任意のhtmlファイルに貼り付け、保存

2. SVGタグ配下のタグにクラスを付与
*下記ではclass=”line数字”を追加しました。

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		 y="0px" viewBox="0 0 256.5 136.3" style="enable-background:new 0 0 256.5 136.3;" xml:space="preserve">
	<g>
		<path class="line01" d="M51.6,70.8c-3.9,10-22.4,31.8-27.1,7.9C1.1,113.9-6.2,54.6,9.3,49.9c12.9-3.9-3,22.6-0.5,28.4c5.5,13,12.9-1.3,15.1-8.6
			c1.3-4.4,6.8-35.1,11.5-15.6c1.7,7-15.4,22.7-3.5,28.9c11.5,5.9,11.1-18,13.2-22.4c6.6-14.1,14.2-14,8.6,4.8
			c4.7,2.1,20.7-6.2,20.9-6C79.7,64.6,54.6,71.7,51.6,70.8z"/>
		<path class="line02" d="M109.6,67.4c-8,11.8-30.6,33.7-42.3,15.7c-15.6-24,32.8-47.6,25.1-24.3c-2.8,8.4-29.3,16.7-13.7,24.8
			c10.6,5.5,18.8-12.7,26-15.7C103.8,68.3,114.1,60.3,109.6,67.4z M84.6,52.4c-6.6,0-10.2,12.7-10.9,17.2
			C76.3,67.6,92.3,52.4,84.6,52.4z"/>
		<path class="line01" d="M124.9,31.8c-3,11.9-12.6,24.8-14.2,36.2c-3.1,21.8,12.5,14.6,16.1-1.7c1-4.4-8.9-12.1,2.5-14.5c4.9-1,4.2,5.9,9.7,6.6
			c3.6,0.5,13.5-6.3,14.9-2.8c1.6,3.8-9.1,5.2-10.6,6.4c-2.7,0.9-5.5,1.4-8.4,1.5c-0.8,2.8-1.6,5.6-2.4,8.4
			c-11.1,11.9-25.2,28.7-28.4,1.5c-1.2-9.8,4.5-45.2,13.6-52.1C128,13.6,127.9,20.7,124.9,31.8z"/>
		<path class="line03" d="M152.1,51c1.2-1.5,7.1-2.7,8.8-1.9c4.3,4.4-13.5,25.3-8.1,31.6c8.1,9.6,18.5-17.4,24.6-17.5c3.7-0.1-13.8,26-21.7,25.6
			C139.5,88,145.9,58.7,152.1,51z M165.6,30.2c-2,7.3-9.2,4.5-8.1-2.6C158.3,22,167.8,22.8,165.6,30.2z"/>
		<path class="line01" d="M188.1,84.4c5.9,0,27.5-21.2,27.3-21.3c4.6,5.8-34.2,46.7-44.2,15.8c-3-9.2,3-24.5,11.5-29.4c8.2-4.7,21.5-1.7,15.7,10
			c-8.4,16.9-9-9.5-4.6-6.4C184.2,46.3,167,84.4,188.1,84.4z"/>
		<path class="line04" d="M236.8,72.2c-9.2,35.1-44,5.9-22.9-17.4c10.4-11.5,25.8-5.3,23.7,11.9c2.3-0.9,19.1-11.5,19.4-10.9
			C260.1,60.9,238.5,71.6,236.8,72.2z M214,74.6c0,13.4,11,9.8,14.6-0.1c-5.9,0.8-10.9-2-13.3-7.6C214.6,69.4,214.1,71.9,214,74.6z
			 M220.3,57.4c-2.2,6.5,5.2,15.2,10.3,10.1C235.4,62.6,228.5,46.9,220.3,57.4z"/>
	</g>
</svg>

3. cssでアニメーションを実装。
SVGアニメーションでは主に以下のcssプロパティを使っていきます。

プロパティ名	役割
fill	要素の内部の塗りを指定
fill-opacity	fillで塗られたエリアの透明度を指定
stroke	線、テキスト、要素のアウトラインの色を指定
stroke-width	線の太さを指定
stroke-opacity	strokeで塗られたエリアの透明度を指定
stroke-linecap	パスの端に形状を指定
stroke-linejoin	パスのつなぎ目の形状を指定
stroke-dasharray	線の間隔を指定
stroke-dashoffse	線の始まりの位置を指定

今回のラインアニメーションでは主にstroke-dasharrayとstroke-dashoffseの2つを使います。

プロパティがわかったところで、これらを用いてanimationプロパティと@keyframeでアニメーションさせていきましょう。
今回はとりあえず全てのパスが同時に同じ動きをするようにしました。

svg {
	width: 300px;
	height: auto;
}
.line01,
.line02,
.line03,
.line04{    
	stroke:#333;
	fill:#333;
	fill-opacity: 0;
	stroke-width:1;
	stroke-dasharray: 3000;
	stroke-dashoffset:3000;
	-webkit-animation: LINE 8s ease-in 0s forwards;
	animation: LINE 8s ease-in 0s forwards;
}
@keyframes LINE{
	0%{stroke-dashoffset:3000;fill-opacity: 0;}
	30% {fill-opacity: 0;}
	35% {fill-opacity: 1;}
	100%{stroke-dashoffset:0;fill-opacity: 1;}
}
@-webkit-keyframes LINE{
	0%{stroke-dashoffset:3000;fill-opacity: 0;}
	30% {fill-opacity: 0;}
	35% {fill-opacity: 1;}
	100%{stroke-dashoffset:0;fill-opacity: 1;}
}

これで完成！

See the Pen css&svgアニメーション by BICOxxx (@BICOxxx) on CodePen.