【CSSアニメーション】CSSのみでSVGアニメーションさせる方法

今回は以下のような、
ロゴなどのアウトラインをペンで描いているようにアニメーションを
CSSのみで実装する方法のご紹介です。

SVGアニメーションの作成手順

  1. 文字をイラストレーターで書く（今回はAdobeのIllustratorで作成する事にします）
  2. アウトライン化して、SVGで書き出す
  3. htmlに貼り付ける
  4. アニメーション用のCSSを記述する

1: 文字をイラストレーターで書く

イラストレーターで文字を入力します。

2: アウトライン化して、SVGで書き出す

作成した文字をアウトライン化して、SVG(svg)で保存します。
保存したsvgファイルをテキストエディタで開くと下記のようなコードが書かれています。
doc宣言等も書かれて言いますが、使用するのは<svg>〜</svg>の部分です。

保存時にOKボタンではなく、SVGコード…というボタンを選択することで直接コードのみを表示することも可能です。

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.52 128.36">
<path class="cls-1" d="M114.22,315.45A50.22,50.22,0,0,0,140.27,323c9.85,0,18.65-5.45,18.65-17.77,0-8.8-5.1-12.68-16-18.66l-11.44-6.34c-12.15-6.68-20.07-16.36-20.07-32.2,0-22,18.13-33.44,38.72-33.44a80.12,80.12,0,0,1,25.7,4.4l-1.06,18.83c-5.45-2.11-12.67-5.28-23-5.28-11.27,0-17.08,6-17.08,14.43,0,9.15,6.16,12.67,13,16.55l13.2,7.39c14.43,8.09,21.29,15.84,21.29,33.08,0,25-17.77,37-41.18,37-12.32,0-21.82-1.76-28-5.45Z" transform="translate(-110.4 -213.61)"/>
<path class="cls-1" d="M227.39,216.37h24.29l24.81,94.68h.35l25.52-94.68h23.23L288.11,339.21H264.35Z" transform="translate(-110.4 -213.61)"/>
<path class="cls-1" d="M424.15,270.4h39.78v64.24C457.59,338,446.68,341,430.67,341c-39.43,0-60.37-26.75-60.37-63.18s20.94-63.18,60.37-63.18c14.08,0,25.16,3.17,29.91,5.28l-1.23,20.24A54.85,54.85,0,0,0,431,232.56c-23.94,0-36.79,19.71-36.79,45.23,0,27.63,12.5,45.23,35.56,45.23a35.83,35.83,0,0,0,13-2.29V287.65H424.15Z" transform="translate(-110.4 -213.61)"/>
</svg>

3: htmlに貼り付ける

<svg>〜</svg>を表示したい場所に貼り付けます。

4: アニメーション用のCSSを記述する

今回のアニメーションのCSSは下記です。

このままコピペで使えます。

path {
    fill: none;
    stroke: #333;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: 1;
    -webkit-animation: logo 5s ease-in forwards;
    animation: logo 5s ease-in forwards;
}
@-webkit-keyframes logo {
0% {
    stroke-dashoffset: 2000;
    fill:transparent;
}
50% {
    fill:transparent;
}
100% {
    stroke-dashoffset: 0;
    fill:#333;
}
}
@keyframes logo {
0% {
    stroke-dashoffset: 2000;
    fill:transparent;
}
50% {
    fill:transparent;
}
100% {
    stroke-dashoffset: 0;
    fill:#333;
}
}

以上で完了です。

アニメーションのスピードを変えるには下記 5s（5秒）の部分を変更するだけです。
-webkit-animation: logo 5s ease-in forwards;
animation: logo 5s ease-in forwards;

fillは塗り、
strokeはアウトラインです。

今回のアニメーションの最後で文字に色が付きますが
アウトラインだけでいい場合は、keyframeからfillの部分を消してしまえばOKです。

© GOKAN DESIGN STUDIO