CSSアニメーションの設定

それではまず、SVGアニメーションを動かすための土台に設定を行っていきます。
SVGとクラス名を揃え、fill、strokeの設定を行っていきます。
この後設定するアニメーション名を「hello」として、アニメーションの設定も忘れずに行います。

.st1{
　　fill:#0060e6;
　　stroke:#0060e6;
　　stroke-dasharray: 2000;
　　stroke-dashoffset: 0;
　　stroke-width: 1;
　　-webkit-animation: hello 4s ease-in 0s;
　　animation: hello 4s ease-in 0s;
}

土台の設定ができたら、今度はアニメーションの設定を行います。

  @-webkit-keyframes hello {
  　　0% {
  　　　　stroke-dashoffset: 2000;
  　　　　fill:transparent;
  　　}
  　　40% {
  　　　　stroke-dashoffset: 2000;
  　　　　fill:transparent;
  　　}
  　　50% {
  　　　　fill:transparent;
  　　}
  　　100% {
  　　　　stroke-dashoffset: 0;
  　　　　fill:#0060e6;
  　　}
  }

ここまでに「stroke-dasharray」と「stroke-dashoffset」が登場してきましたが、これはそれぞれ線の「感覚」と「位置」を指定していくものです。
パスの長さよりも多めに指定しても大丈夫なので、デモでは多めに2000を設定しています。

デモ

以上のように設定すると、このように線が表示され、その後中の塗りが行われるアニメーションが完成します。
もちろん、数値などの設定を変えることで、簡単に設定の変更を行うこともできます。

See the Pen svganime by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

(アニメーションがうまく表示されない場合は「Rerun」を押して再起動してみてください)