SVGとは?


出所:https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

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

ベクター画像なので画像を拡大した場合でも曲線部が滑らかで使いやすいです。


LYZONロゴ引用(SVGファイル)

LYZON

↑コーポレートサイトロゴサイズ「width=102.13, height=24」

LYZON

↑大きいサイズ「width=100%」

こんなに最大に拡大しても綺麗に~

早速、「LYZON」のロゴを使ってアニメーションを付けてみましょう


SVGのソースを確認

LYZONのコーポレートサイトロゴを使います。(SVGで作られています。)

マウス右クッリク「検証」でソースを確認しましょう。

指定されたSVGコードをコーピーします

コーピーしたコードをエディタで各パスごとにclassを付けます~(class="path")

ここまで来たらもうCSS書くだけ!


Animation CSSを書く

私はCSSを下記のように簡単に書きました。

  
.path {
    stroke: #000;
    fill: #fff;
    stroke-width: 0.1;
    stroke-dasharray: 2100;
    animation: DASH 5s;
    -webkit-animation: DASH 5s;
    -moz-animation: DASH 5s;
    -o-animation: DASH 5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}
@keyframes DASH {
    0% {
        stroke-dashoffset: 2100;
        fill: #fff;
    }
    50% {
        stroke-dashoffset: 2050;
        fill: #fff;
    }
    100% {
        stroke-dashoffset: 0;
        fill: #000;
    }
}
@-webkit-keyframes DASH {
    0% {
        stroke-dashoffset: 2100;
        fill: #fff;
    }
    50% {
        stroke-dashoffset: 2050;
        fill: #fff;
    }
    100% {
        stroke-dashoffset: 0;
        fill: #000;
    }
}
@-moz-keyframes DASH {
    0% {
        stroke-dashoffset: 2100;
        fill: #fff;
    }
    50% {
        stroke-dashoffset: 2050;
        fill: #fff;
    }
    100% {
        stroke-dashoffset: 0;
        fill: #000;
    }
}
@-o-keyframes DASH {
    0% {
        stroke-dashoffset: 2100;
        fill: #fff;
    }
    50% {
        stroke-dashoffset: 2050;
        fill: #fff;
    }
    100% {
        stroke-dashoffset: 0;
        fill: #000;
    }
}
  

Animation プロパティ

  • animation-name アニメーションを適用する要素を指定する
  • animation-duration アニメーションが完了するまでの時間を指定する
  • animation-timing-function アニメーションの進行度を指定する
  • animation-delay アニメーションが開始するまでの時間を指定する
  • animation-iteration-count アニメーションの実行回数を指定する
  • animation-direction アニメーションの再生方向を指定する
  • animation-fill-mode アニメーションの再生中・再生後のスタイルを指定する
  • animation-play-state アニメーションの再生、または一時停止を指定する

CSSを書くと下記のように!


LYZON


ブラウザ対応

SVG Css AnimationはEdgeとIEでは対応できませんのでJavaScriptやjQueryを使いましょう~


応用

カラー変更して「Z」だけ違うカラーにするとアニメーション「LYZONロゴ」が完成!


LYZON

今回はCSSだけ使って動きを表現しましたが「Javascript」や「jQuery」を一緒に使うとさらに豊かな動きの表現ができます。


この続きを読むにはログインが必要です。

VISION

世界に役立つ脳を創ろう

デジタルマーケティング

Sitecore

それだけでは意味のないアクセス解析データとマーケティングシナリオを結び付けることで、新たなvalueを生み出す。

人工知能

Deeplearning

膨大な情報を結び付けるために(効率的に実現するため)Deeplearningなどの人工知能の技術を応用し、価値を創造する。

Webとシステムをつなぐ

全体最適

断絶されたWebとシステムをつなぎ、各サービスごとに分断されたクラウドサービスごとをつなぎ、部分最適ではなく全体最適を実現する。

CONTACT

Webサイト制作に関するご相談、サービスに関するお問い合わせはこちら