JSいらずのSVGアニメーション

こんにちわ、デザイナーの小野です。
今回は、キャッチコピーやロゴマークなどSVGを使用した時の装飾の1つとして
jsを使わずに、htmlだけで完結できるアニメーションをご紹介します。

#svg1 ラインを走らせてから塗りつぶすanimation

準備：イラレなどでアウトライン作成したsvg画像をアップロード(線がなく一体化している画像)

<style>
	#svg1 { 
                position: relative;
                margin: 0 auto;
                width: 400px;
                height: 400px;
	}
	path {
               fill: #fff; /*塗り*/
               stroke: #fff; /*線*/
               stroke-width: 3; /*stroke不要は 0*/
               stroke-linecap: round; /*round角丸、square直角*/
               animation: svg1 5s ease-in both infinite; /*5sはアニメーション時間5秒*//*infiniteはリピート、 1回のみはforwards*/
	}
@keyframes svg1 {
       0% {
               fill: transparent;
               stroke-dasharray: 2000; /*細かさ：試しにいろんな数字に置き換えてみてください*/
               stroke-dashoffset: 2000;
        }
        30%{
              fill: transparent;
              stroke-dashoffset: 0; /*アニメーション開始〜1.5秒でstroke書き終える*/
        }
        50%{
             fill: #fff; /*アニメーション開始2.5秒〜5秒の間で白色に塗りつぶす*/
        }
}
</style>
<div id="svg1">
	<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 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
         <path d="M277.3,250c-0.3-0.9-1.8-1.5-2.6-1.5c-2.1-0.3-3.2-0.3-4.4,0c-4.4,0.9-8.5,2.9-12.6,4.7
	c-1.8,0.9-2.6,1.2-4.7,1.5c7.6-7.3,12.9-18.8,16.1-29.9c3.2-11.4,3.5-23.4,1.2-35.2c-1.2-5.9-3.2-11.4-5.9-16.7
	c-1.2-2.6-2.6-5.3-4.4-7.6c-0.3-0.6,2.6-7.3,3.2-11.4c0.9-4.1,1.2-8.5,0.9-12.6c-0.3-5.9-0.6-13.2-3.5-18.5
	c-0.9-1.5-2.3-2.9-4.1-1.5c-1.5,0.9-2.6,3.8-3.8,5.9c-0.9,1.8-9.7,16.4-12,18.5c-9.7-6.7-21.7-11.7-33.4-13.5
	c-12.3-1.8-24.6-0.3-36.1,4.1c-6.2,2.3-12,5.6-17.6,9.4c-3.2-4.7-7.9-12.3-10.6-17c-1.5-1.8-3.5-6.7-5.6-7.9
	c-0.6-0.3-1.8-0.6-2.9,0.6c-2.1,2.1-3.2,8.2-3.8,11.7c-0.9,5.6-1.2,12-0.3,17.9c0.9,5,2.3,9.4,3.8,13.8c0,0.3,0.3,0.3,0,0.3
	c-0.3,0.3-2.3,3.5-2.9,5c-1.5,2.6-2.9,5.9-3.8,8.8c-4.4,11.1-5.6,23.4-4.4,35.2c1.2,11.4,5.3,22.9,11.7,32.5
	c6.2,9.1,13.8,17.3,23.4,22.9c10.3,5.9,22,9.4,33.7,10c11.7,0.9,23.4-1.2,34.3-5.9c0.9-0.3,2.1-0.9,2.9-1.5c1.2,0.6,2.6,0.9,3.8,1.2
	c3.8,0.6,7.9,0.6,12-0.3c2.6-0.6,5.3-1.5,7.9-2.6c3.2-1.5,9.1-6.2,11.1-8.5c2.6-2.6,7-6.7,9.1-8.5
	C275.2,252.1,277.6,250.9,277.3,250z"/>
     </svg>
</div>

#svg2 縁取りをしてから色をつけるanimation

準備：イラレなどでアウトライン作成したsvg画像をアップロード(ロゴテキストなどラインがある画像)

<style>
	#svg2 {
                position: relative;
                margin: 0 auto;
                width: 400px;
                height: 400px;
	}
	path {
               fill: #fff;
               stroke: #fff;
               stroke-width: 1;
               animation: svg2 5s ease-in both infinite;
	}
@keyframes svg2 {
       0% {
               fill: transparent;
               stroke-dasharray: 2000;
               stroke-dashoffset: 2000;
        }
        30%{
              fill: transparent;
              stroke-dashoffset: 0;
        }
        50%{
             fill: #fff;
        }
}
</style>
<div id="svg2">
	<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 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
   <g>
           <path d=""><!--path情報をコピペ-->
	   <g>
		   <path d=""><!--path情報をコピペ-->
		   <path d=""><!--path情報をコピペ-->
		   <path d=""><!--path情報をコピペ-->
	   </g>
   </g>
   </svg>
</div>