Webサイトのトップビジュアルなどで、ロゴやテキストが徐々に描画されるアニメーションを時々見かけますね。 そこで今回はSVG形式の画像ファイルをCSSでアニメーションするサンプルをご紹介します。

サンプルはこちら
サンプルコード（GitHub）はこちら

SVGファイルを用意する

SVGというのはScalable Vector Graphicsの略称で、2001年頃にW3Cより勧告された技術です。拡大縮小してもギザギザにならないベクター形式の画像で、 近年はサポートするブラウザも増えたことから多くのサイトで使われるようになりました。
CSSで色の指定やアニメーションも可能なので、とても便利ですね…！

さて今回用意したSVGファイルは、iPadで適当に描いた文字を画像として保存し、Illustratorで画像トレースしました。（管理人の沖縄に行きたい気持ちがあふれ出ています）
[アセットの書き出し]で簡単にSVG形式の画像ファイルを書き出すことができます。

SVGファイルをテキストエディタで開くと、下記のようなソースを確認できます。

CSSでアニメーションをつける

それでは肝心のアニメーションをさせます。

アニメーションに関わるプロパティを簡単に説明すると、

stroke
線の色を指定します。

stroke-dasharray
線の間隔を指定します。

stroke-dashoffset
線の開始位置を指定します。

animation
アニメーションに関するプロパティ（@keyframe名やスピードやタイミング）を指定します。

stroke-dasharray（間隔）にはパスの長さを設定します。とはいえパスの長さよりも多くなっても大丈夫のようです。これでパスの線を隠します。 そしてstroke-dashoffset（開始位置）にも同じ値＝パスが隠れる位置を設定します。

@keyframeで徐々にstroke-dashoffsetの値が0になるようにします。これでアニメーションの完成です！
今回は塗りの部分もほんのり白くなるように設定しました。