【CSS】SVG + CSS3で簡単にアニメーションを作成する！

はじめに

今回はSVGとCSS3を使い、簡単なアニメーションを作成する方法をご紹介します。

この記事は特に、SVGのロゴ/イラストなどがあり、それに少し動きをつけたい！と思っている方に向けたものになります。

スクロールなどに合わせてアニメーションをつけたい方は、別の下記記事をご覧ください。

【JS】スクロールした時にCSSanimationを発動させる「scrollMonitor」

今回の記事で作っていくデモはこちらです。

See the Pen BwaYdz by Ayaka Sasaki (@ayausaspirit) on CodePen.

SVGをアニメーションさせる方法

まずはSVGをアニメーションさせる方法をご紹介します。

SVGをアニメーションさせる方法は大きく３つあります。

1. SVGのコードの中に<animate>タグを入れ込み、アニメーションを設定させる方法
2. snap.svg や SVG.jsのようにライブラリを使ってアニメーションを作る方法
3. インラインSVGを入れ、CSSでそれぞれのSVGのパーツをアニメーションする方法

以前、私は 1.の (SVGのコードの中に<animate>タグを入れ込む) 方法を試したことがあります。
しかし、SVGは(0,0)から(画像の横幅、画像の縦幅)の座標の上に それぞれのパーツをマッピングしていく、という方法をとっており、パーツを少し動かすにしても、座標を計算しなくてはいけないため、非常に時間がかかり、断念しました。

1. の方法は複雑なアニメーションを作る際にはぜひ使いたいライブラリなのですが、私のように「ロゴをちょっと動かしたい」、程度の簡単なアニメーションを作成するにはちょっと重すぎる気がしました。

そこで、最終的に3の方法を試したところ、思ったよりもアニメーションが早く作成でき、なかなか良い感じでした。

では、こちらのアニメーションを作成方法をご紹介します。

See the Pen BwaYdz by Ayaka Sasaki (@ayausaspirit) on CodePen.

アニメーションするベクター画像を用意

まずは、イラストレーターなどSVGが書き出せるデザインツールを使用し、アニメーションを加えるベクター画像を用意します。

この際、SVGコードになるべく不要なものは入れたくないので、アニメーションをする際に不必要なグループなどは解いておきます。

同様に、背後に隠れている不必要なシェイプなどは消しておきます。

私は今回、こちらの画像を使用しました。

SVGをお掃除する

イラストレーターなどのデザインツールから吐き出されたSVGコードには不必要なコードが混じっています。

例えば、私のはき出されたコードには

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

このようにDOCTYPE宣言やイラストレーターから作成されました、というコメントなどが入っています。

これらはアニメーションをする前にお掃除しておきます。

SVGをお掃除するツールはたくさんあるので、どれを使用されても構いませんが、個人的なオススメはGUIで手早くできるこちらです。
SVGOMG

ちなみに私の場合、コードをお掃除することで27.26%コードを圧縮することができました。

動かしたいパーツにクラス名を付与する

ここまでできたら、次は動かしたいパーツをCSSで拾えるように、クラス名を付与します。

私の場合、今回は全てのパーツを動かしたい、かつ別々に動かしたいので、それぞれに別のクラス名をつけますが、一緒に動かすパーツは同一のクラス名でOKです。

また、イラストレーターから吐き出したコードの場合、すでにデフォルトでidやクラスなどがついいるので、そちらを利用しても良いですし、覚えにくければスタイルを影響しない程度にidなどは消して新しくつけてもOKです。

ちなみに、このようなコードになっています。

See the Pen BwaYdz by Ayaka Sasaki (@ayausaspirit) on CodePen.

アニメーションを作成する

アニメーションを作成していきます。

アニメーションを0から作るのが不安な方や、少しでも効率的にコードが書きたい！という方はCSSアニメーションライブラリ、animate.cssやvivifyなどからコードをダウンロードしてくるのも良いかもしれません。

animate.css

vivify

今回は、ポコポコと文字が弾けるようなアニメーションを作ります。

コードはこんな感じになりました。

@keyframes pop {
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
    transform-origin: center;
  }
  5%, 100% {
    opacity: 1;
  }
  15%{
     transform: scale3d(1, 1, 1);
  }
}

アニメーションを紐付ける

あとは、アニメーションを当てたい要素に先ほど作ったpopのアニメーションを紐付けます。

.st1 {
  -webkit-animation: pop ease-out 3s infinite; 
  animation: pop ease-out 3s infinite; 
}

また、それぞれの文字ごとにアニメーションをするタイミングをズラしたいので、このようにanimation-delayプロパティを設定していきます。

.a{animation-delay: 0.1s}
.g{animation-delay: 0.2s}
.e1{animation-delay: 0.3s}
.l{animation-delay: 0.4s}
.e2{animation-delay: 0.5s}
.e3{animation-delay: 0.6s}

これでできました！

もしWebサイトなどで使いたい場合、インラインでSVGを入れるのはなかなかコードが汚くなる可能性があります。

また、<img>タグの中にSVGを入れると、ブラウザによってSVGが表示されない可能性があります。

おすすめは、CSS3のアニメーションの設定をSVGの中にインラインスタイルで書き込み、<object>タグでSVGを読み込むという方法です。

<object type="image/svg+xml" data="logo.svg" class="logo">
  bagelee <!-- 対応してない場合に表示される -->
</object>

まとめ

以上、今回はSVG + CSS3で簡単にアニメーションを作成する方法をご紹介しました。

SVGと聞くと、少し不安を抱く方もいらっしゃるかもしれませんが、実際にSVGのコードを触ることはほとんどありません。（それぞれのパーツにクラス名付与する部分だけです）
どちらかというとCSSアニメーションを多用するので、そちらをマスターすれば、かなり表現の幅が広がるので、ぜひ試してみてください。