Web制作のアレコレ

svgをcssでアニメーションさせる

svg形式のファイルを書き出す

これをやるにはsvg形式のファイルが必要
イラストレーターで書き出しましょう

svg形式?

googleによると
『Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。 アニメーションやユーザインタラクションもサポートしている。 SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。』

だそうです。
拡大縮小にすごく強い画像形式だと思います
ここで紹介しているってことはwebでもイケます

svg形式のファイルの使い方

imgタグであったり背景画像の設定であったり普通の画像と同じように使えます

cssと組み合わせてアニメーションさせる場合はsvg形式のファイルを「テキストエディタ」で開き
書いてあるコードをHTMLの貼り付けたい場所にコピペしましょう

イラレで作った時に出てくるタグ

ぬけがあるかもしれません
基本的にこれらのタグを操作すると描画がおかしくなったりするのでそのまま使う

svg svgを埋め込むときに全体を囲むためのタグ
defs 描画オブジェクトの定義をするタグ
イラストレーターで作るとstyle属性が入っていて描画用のcssが設定されている
※アニメーション設定をする際に邪魔になる場合があるので消すことも可能
設定はcssの方でした方が管理しやすい
title svgのタイトルを設定するタグ
マウスカーソルをsvgに乗せるとここで設定したタイトルが小さく表示される
path パスを描画するときの情報が入っているタグ
線はstrokeプロパティ
塗はfillプロパティで色の設定ができる
circle 円を描画するときの情報が入っているタグ
線はstrokeプロパティ
塗はfillプロパティで色の設定ができる
line 直線を描画するときの情報が入っているタグ
線はstrokeプロパティ
塗はfillプロパティで色の設定ができる

実際に使ってみる

今回は下のようなsvg形式のファイルを用意しました
輪郭はパス
目は塗
口は直線でそれぞれ作りました

これをアニメーション付きで表示していきたいと思います

svgをテキストエディタで開く

なにも設定をいじっていない状態であればアイコンはIEになっているはず
これをテキストエディタ開くとコードが出現しますので貼り付けたいところにコピペしましょう

cssを記述する

svg用のプロパティ

stroke 線の色の設定をするプロパティ
fill 塗の色を設定するプロパティ
stroke-width 線の太さを設定するプロパティ
stroke-opacity 線の不透明度を設定するプロパティ
stroke-linecap 線の端部分の設定
round:丸
butt:平ら
square:四角
stroke-linejoin 線の頂点の設定
miter:鋭角
round:丸
bevel:面取り
stroke-dasharray 点線や破線のパターンを設定
長さの数値をカンマ区切りで設定する
stroke-dashoffset 線の開始位置の設定

今回は輪郭を描画する→目を描画する→口を描画する
という順番で表示していきたいと思います
輪郭はpathタグ
目はcircleタグ
口はlineタグで生成されていますのでそれぞれに対してアニメーションの設定をします
今回は線の開始位置をずらしておき、見えなくし、
徐々に開始位置を戻して線をを書いてるように表示するためanimationと@keyframesを使い簡単なアニメーションにしました

参考にcssのコードを紹介しておきます

輪郭のコード


@keyframes ono{
  0%{
    stroke-dashoffset:2000;
  }
  50%{
    stroke-dashoffset:1800;
  }
  100%{
    stroke-dashoffset:0;
  }
}

path{
  fill:rgba(0,0,0,0);
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  stroke-linecap: round;
  animation:ono 2s forwards;
}
目のコード


@keyframes ono2{
  0%{
    fill:rgba(0,0,0,0);
  }
  100%{
    fill:rgba(0,0,0,1);
  }
}

circle{
  animation:ono2 2s step-end forwards;
}
口のコード


@keyframes ono3{
  0%{
    stroke-dashoffset:2000;
  }

  100%{
    stroke-dashoffset:0;
  }
}

line{
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  stroke-linecap: round;
  animation:ono3 3s step-end forwards;
}

更に参考

上のはgifなので本物をアップロードしてみました
sample10