2017年9月20日

デザイン

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

目次

  1. はじめに
  2. SVGをアニメーションさせる方法
  3. アニメーションするベクター画像を用意
  4. SVGをお掃除する
  5. 動かしたいパーツにクラス名を付与する
  6. アニメーションを作成する
  7. アニメーションを紐付ける
  8. まとめ

はじめに

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

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

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

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

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

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

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

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

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

  1. SVGのコードの中に<animate>タグを入れ込み、アニメーションを設定させる方法
  2. snap.svgSVG.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.cssvivifyなどからコードをダウンロードしてくるのも良いかもしれません。

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アニメーションを多用するので、そちらをマスターすれば、かなり表現の幅が広がるので、ぜひ試してみてください。

2

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP