SVGを使ったテキストアニメーション

SVGを使ってアニメーションさせながらテキストを表示していく方法を紹介します。ここでは、文字のアウトラインを描いてから色を塗りつぶすといったアニメーションをさせてテキストを表示していく方法でやってみます。

アウトラインの描き方

SVGでアウトラインを描く場合は、strokeプロパティを使います。

text {
  stroke: #000;
  stroke-width: 1px;
}

このように指定をした場合は線幅1pxの黒色でアウトラインが描かれます。

要素の中身の描き方

要素に塗りをつけて中身を描く場合は、fillプロパティを使います。

text {
  fill: #000;
}

このようにすると、黒色で要素の中身が塗りつぶされます。塗りつぶさずにアウトラインだけ描きたい場合は「fill: none;」とすることで要素のアウトラインだけが描かれます。

アニメーションのさせ方

アウトラインにアニメーションをつける場合は、stroke-dasharrayプロパティとstroke-dashoffsetプロパティを使います。

text {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}

stroke-dasharrayプロパティは線の長さを指定するもので、stroke-dashoffsetプロパティは線の開始位置を指定するものです。この線の長さ分だけ開始位置をずらして最終的に開始位置を「0」に動かしていくことで線がアニメーションしながら描かれます。その際、線の長さは大きめに設定するようにしてください。長さが足りないとうまく線が描かれないことがあります。

これらを使ってkeyframesと組み合わせたアニメーションの設定が以下のようになります。

text {
  stroke: #333;
  stroke-width: 0.5px;
  fill: #333;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: textAnime 5s linear;
}
@keyframes textAnime {
  0% {
    stroke-dashoffset: 600;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#333;
  }
}

以上が、SVGを使ったテキストアニメーションの作成方法となります。