こんにちは。ジップサービスでデザイナーをしているものです。

今回は前回の続き（サイトのロゴをPNGからSVG形式に変更）です。

前回紹介しましたSVG画像に動きを付けて見たいと思います。

cssでアニメーション

デモにマウスオーバーすると下部に現れる「RERUN」のボタンを押してみてください。文字の形にそってラインがアニメーションします！

イラストレーターで出力したｓｖｇデータをテキストエディターで開くと、ソースコードが確認できます。

そのソースコードを使用して、表示し、該当箇所にcssで動きを付けていきます。

<div class="gip">
<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 370.9 57.3" style="enable-background:new 0 0 370.9 57.3;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#000000;}
	.st1{font-family:'Kan415TyposStd-Regular-83pv-RKSJ-H';}
	.st2{font-size:52.3559px;}
</style>
<g id="layer">
<text transform="matrix(1 0 0 1 0.5 46.5732)" class="st0 st1 st2 gip_path">GIP SERVICE</text>
</g>
</svg>
</div>

.gip{
    text-align: center;
    position: relative;
    padding: 50px;
    width: 540px;
    margin: 0 auto;
}

.gip_path{stroke:#666;
fill:none;
stroke-width:1;
stroke-dasharray: 3000;
stroke-dashoffset:3000;
animation: DASH 9s ease-in alternate forwards;
-webkit-animation:DASH 9s ease-in 0s forwards;
-o-animation:DASH 9s ease-in 0s forwards;
animation:DASH 9s ease-in 0s forwards;
}
@keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-moz-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-o-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-ms-keyframes DASHf{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;
}

画面中央に表示し、CSSの点線のプロパティである、stroke-dasharrayとstroke-dashoffsetを使って点線の幅を変化させることで、実際に線が引かれているかのようなアニメーションを実装しました。

まとめ

cssで各要素に変化が付けられますので、cssだけでも色々とできそうですね。
JavaScriptを使用すればもっと複雑な変化もつけられそうです。