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

goto_jp 1,286views 更新:2017年1月19日

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

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

HTMLでSVGを描画する」でSVGの描画について書きましたが、この描画方法にCSSを加えてアニメーションさせます。在りし日のFlashを彷彿とさせる動きができます。

See the Pen SVG Animation by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

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

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

 

HTML

IllustratorからSVG保存時にコード書き出しをしているだけで、 svg 内の path タグを手で書くことはしていません。

コード書き出し時に「SVG」と「Animation」で色違いの箇所はCSSクラスも書き分けてくれるので、ここを意識して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プロパティをいくつか使っています。

プロパティ役割
strokeSVGの線の色
fillSVGの塗りの色
stroke-dasharray線の長さ
stroke-dashoffset線の開始位置
stroke-width線の太さ

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

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

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

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません