CSSだけでSVGをアニメーションさせる

こんにちは、ゴトーです。

ロゴにSVGアニメーションを利用しているサイトを最近たまに見るので、試したところJSを使わず簡単にできたのでご紹介します。

「HTMLでSVGを描画する」でSVGの描画について書きましたが、この描画方法にCSSを加えてアニメーションさせます。<img>タグでsvgファイルを読み込む形式ではできません。

在りし日のFlashを彷彿とさせる動きができます。

ページ表示と同時にアニメーションするので、終わってしまっても「Repeat」ボタンでまた再生されます。
（JSはこのリピートボタンだけに使っています）

SVGの線と塗りのアニメーションをCSSだけで操作しています。

HTML

svg 内の pathは、IllustratorからSVG保存時にコード書き出しをしています。とてもこの分量を手で書くことはしません。

Illustratorからのコード書き出し時に、「SVG」と「Animation」のグループ別にCSSクラスを書き分けてくれます。サンプルでは「SVG」がst0、「Animation」がst1と付けられており、このクラスを意識してCSSを組みます。

またSVGは単なる画像なので、SEO的に意味を持たせたい場合は svg内の title タグで代替テキストにできます。

なおpathタグによる点と線の記述は、Illustratorで描画した順に生成され、その書き順がそのままCSSアニメーションにも反映されるようです。今回はフォントをSVG化しただけなのですが、線をアニメーションさせる前提でイラストの書き順にも凝ると面白い動きが作れそうです。

CSS

最初は何も表示させたくないので、SVGの線(stroke)、塗り(fill)ともに透明にしています。

path {
    stroke:transparent;
    fill:transparent;
}

そして start のクラスを付与することでアニメーションを実行するようにしています。

#svg.start {
  .st0, .st1 {
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: .5;
  }
  .st0{
    stroke:#0099CC;
    animation: st0_anime 3s ease-in 0s forwards; 
  }
  .st1{
    stroke:#999999;
    stroke-dashoffset: 2000;
    animation: st1_anime 3s ease-in .5s forwards; 
  }
}

SVGを制御するためのCSSプロパティをいくつか使っています。

stroke-dasharrayとstroke-dashoffsetはちょっとクセがありますが、実際に使って試行錯誤して慣れたほうがよさそうです。

そして以下のCSSのキーフレームで、線の開始位置(stroke-dashoffset)を推移させることで、線をなぞるアニメーションを実現しています。

@keyframes st0_anime {
  0% {
    stroke-dashoffset: 2000;
    fill:transparent
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#0099CC;
  }
}

線をなぞるSVGアニメーションは全く同じ手法で最近よく見るので、そのうちドロップシャドウのように飽きられる動きだなと思ってますが、今はまだインパクトがあるので飽きられる前に使っちゃいましょう。