はじめに

SVGとCSSを使い、線が回るテキストアニメーションを作ります。

完成像↓（右下のRerunを押すと再開します）

See the Pen
SVG Text Animation by MasatomoFukuda (@chitomo12)
on CodePen.

※Impactフォントに対応してない端末で見ると書体が違って表示される場合があります

SVGテキストを配置する

テキストの外郭に沿って線が動くアニメーションを作るのに普通の文字列は対応しておらず、一度テキストをSVGにする必要があります。

そこで文字列をSVG化してくれるのが<svg>タグです。

svg.html

<body>
<svg viewBox="0 0 100 80" class="svgbox">
    <g font-size="30">
      <text x="50" y="40" text-anchor="middle" dominant-baseline="central">
        <tspan>Animate!</tspan> 
      </text>
    </g>
</svg>
</body>

実行イメージ

これだけだと味気ないので、フォントを設定し、ついでに後のアニメーションのために白抜きします。

css

.svgbox{
    fill:white;
    stroke:red;
    stroke-width:0.2px;
    font-family:"Impact"; 
}

実行イメージ

早速良い感じになってきました

周りのstrokeを動かしたいので、動かした際のラフ画を作ってみましょう。
stroke-dasharrayプロパティで線と線との間隔を、stroke-dashoffsetプロパティで線の位置を調整します。

css

.svgbox{
  fill:white;
  stroke:red;
  stroke-width:0.2px;
  font-family:"Impact"; 
  stroke-dasharray:3px 1px;  /*点線の間隔を設定*/
  stroke-dashoffset:10px;  /*線の位置を設定*/
}

実行イメージ

回る気がしてきました。
それでは！これをアニメーションしていきましょう。

テキストを回す

CSSでアニメーションを作るには、transitionプロパティとanimationプロパティを使う二通りのやり方があります。
ここでは設定が細かくできるanimationプロパティを使います。

進行度0%～100%時点での変化を指示するキーフレームを作成し、これをanimationプロパティから呼び出すことでアニメーションを適用することができます。

css

.svgbox{
      fill:white;
      stroke:red;
      stroke-width:0.2px;
      font-family:"Impact"; 
      stroke-dashoffset:10px;
      stroke-dasharray:3px 1px;
      animation:move 2s ease infinite normal forwards;
      /* animation: 左から「呼び出すキーフレーム名」「アニメーションサイクルの長さ」「速度変化」「再生回数」「繰り返し方法」「終了後のスタイル設定」を指定 */
    }
    @keyframes move{
      0%{
        stroke-dashoffset:0;
        stroke-opacity:0;　/* 線の不透明度を0に */
        stroke-width:0.1px; /* 細い線から始める */
        stroke-dasharray:0px 20px; /* 最初はすべて白線 */
      }
      100%{
        stroke-dashoffset:20;
        stroke-opacity:1;　/* 線の不透明度を1に */
        stroke-width:0.5px; /* だんだん線を太くする */
        stroke-dasharray:15px 0px; 
      }
    }

See the Pen SVG Text Animation 01_q01 by MasatomoFukuda (@chitomo12) on CodePen.

基本のアニメーションはこれでほぼ完成です！

あとは細かい調整などを加えましょう。

レスポンシブ対応として、SVG描写範囲をウィンドウサイズに合わせて変更するようwidthとheightの値も入力します。

それから個人的な趣味で、キーフレームにワンクッションを加え、グラデーションを文字全体にかけることにします。
SVGテキストにグラデーションを適用するには、SVGタグ内でグラデーションを定義する必要があります。

svg.html

<svg width=98vw height=80vh viewBox="0 0 100 80" class="svgbox">
    <!--  グラデーション作成  -->
    <defs>
      <linearGradient id="myGradient" gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="#0E5CAD"/>
        <stop offset="80%" stop-color="#79F1A4"/>
      </linearGradient>
    </defs>

    <!--  描写するテキスト作成  -->
    <g font-size="25">
      <text x="50" y="40" text-anchor="middle" dominant-baseline="central">
        <tspan>Animate!</tspan>
      </text>
    </g>
  </svg>

ここで定義した#myGradientを、CSSの方で呼び出します。

css


    .svgbox{
      fill:url(#myGradient);  /* グラデーションを適用 */
      stroke:url(#myGradient);  /* グラデーションを適用 */
      fill-opacity:0;
      animation:move 2s ease 1 normal forwards;
      font-family:"Impact";
    }
    @keyframes move{
      0%{
        stroke-dashoffset:0;
        stroke-opacity:0;
        stroke-width:0.2px;
        stroke-dasharray:0px 20px;
      }
      70%{
        stroke-dashoffset:10;
        fill-opacity:0;
        stroke-width:0.3px;
        stroke-dasharray:25px 8px;
      }
      100%{
        stroke-dashoffset:20;
        fill-opacity:1;
        stroke-opacity:1;
        stroke-width:0.8px;
        stroke-dasharray:15px 0px;
      }
    }

そんなこんだで完成したのがこちら！

See the Pen
SVG Text Animation 01_q02 by MasatomoFukuda (@chitomo12)
on CodePen.

まとめ

解像度の高いモニターが世の中に普及したことからWebデザインでSVG画像を使う例はよく聞くようになりましたが、テキストを動かすためにSVGタグを活用する例はあまり少ないなと思い、勉強がてらに投稿しました。

作成プロセスを分かりやすくしたい思いで細かい箇所の説明は端折ってしまったため、説明不足なところは適宜調べて頂けますと幸いです。

また、誤っている点などがありましたらご指摘頂けますと嬉しいです。

SVGとCSSで線が回るテキストアニメーションをつくる

はじめに

SVGテキストを配置する

テキストを回す

まとめ