アートボード_3_300x-80

SVGでCSSアニメーション

sumi

illustratorの練習にモーツァルトのアイコンを作ったところ、「これアニメーションさせたら良いかんじでは」と思いやってみました。

CSSだけでできるので、ぜひご参考ください〜🙌

できたもの

はじめに

カラフルな線が印象的なアイコンができたので、ラインを描いていくようなアニメーション（ドローアニメーションというのかな？）にしていきます。

最初に見かけた方法はvivusというSVGアニメーションのJavascriptライブラリ。

簡単に手書き風？アニメーションができそうです。

でもvivusはやめました。Javascript重いのでCSSだけでいけるならそのほうが良いですよね・・。ということで調べつつやってみました。

SVGを表示する

/mozart.svg（モーツァルトの顔部分）

<svg id="icon" xmlns="http://www.w3.org/2000/svg">
.
.
.
</svg>

/mozart-text.svg（Wolfgang Amadeus Mozartの部分）

<svg id="icon" xmlns="http://www.w3.org/2000/svg">
.
.
.
</svg>

イラレからエクスポートしたsvgをルートに用意します。

<div class="icons">
 <svg class="logo mozart" viewBox="50 25 298 338">
   <use xlink:href="/mozart.svg#icon" />
 </svg>
 <svg class="logo text" viewBox="0 15 391 32">
   <use xlink:href="/mozart-text.svg#icon" />
 </svg>
</div>

次にHTMLを書いていきます。

svgタグにviewBoxを指定、useタグのxlink:hrefにSVGのパスを指定することでSVGを好きな場所に指定できます。#iconの部分は、svgのidにあたります。

アニメーション

このCSSだけでラインを描くアニメーションが実現できます。

@keyframes mozart_line {
 0% {
    stroke-dashoffset: 1750;
 }
 100% {
    stroke-dashoffset: 2000;
　}
}

@keyframes text_line {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
   transform: translateX(0);
 }
}

.mozart {
 stroke-dasharray: 500;
 stroke-dashoffset: 2000;
 stroke-width: 2;
 animation-name: mozart_line;
 animation-duration: 2.5s;
 animation-timing-function: ease-out;
}

.text {
 transform: translateY(-50px);
 animation-delay: 2.5s;
 opacity: 0;
 animation-fill-mode: forwards;
 animation-name: text_line;
 animation-duration: 2s;
 animation-timing-function: ease;
}

stroke-dashoffsetプロパティ

これは、線の位置を指定することができます。つまりstroke-dashoffset: 0;だと位置が0なので、なにも表示されません。

100%表示させるには、線の長さごとに値が異なります。

今回は仮で2000を指定しています。大きな数字を指定することで、stroke-dashoffset: 2000;のときはすべてが表示されます。

これをkeyframeを使って0%から100%に表示すれば、線ごとに描かれるようなアニメーションが実現できます。

Code Pen（デモ）

今回のコードをCode Penに置いてみたので実際に触ってみて下さい。

最後に

CSSだけでいろいろな事ができますね。SVGと組み合わせれば表現方法がさらに広がりそうです。

最後にわたしの好きなモーツァルトのピアノ協奏曲第27番を貼っておきます。好きな曲はいろいろあるけど、この2楽章が美しくて何度聴いても震える・・。（2楽章は14:15からどうぞ）

参考URL

animationプロパティを参考にさせてもらいました。

strokeプロパティを参考にさせてもらいました。

CSSについて、もっと知りたい方はこちらの本がおすすめです。とても丁寧に書かれていてCSSを一段深く理解させてくれます。


スキ頂けると嬉しいです〜