cssでsvgをアニメーションしてみる件

2021.06.16 TECH: cssでsvgをアニメーションしてみる件

Please
hover.

かなり前に『cssでモーショングラフィックス風に円グラフを表示させる』という記事を書きました。その際に cssアニメーションに関して、少しだけザワついたので今更ながら詳細を解説したいと思います。
上記の例は星形をアニメーションさせてますが、これを基準に進めます。(hover してみてください)

svg を用意・作成する

アプリケーションを使って作成

ぶっちゃけ svg が出力できるのであれば、どのようなアプリを使っても問題はありません。
一番使い慣れているモノがイイですね！
おそらくですが…大半の方が illustrator を使用するのではないかと推測します。
ちなみに私は少数派だと思いますが FireWorks を使用して作成しております…

それと css を設定する際に必要になりますので、パスの長さを測っておきましょう。
illustrator の場合は【ウインドウ＞ドキュメント情報＞オブジェクト】でパスの長さが表示されます。
ちなみに今回の例では 1250px となっております。

座標で path を設定し作成

<path d="M 125 1 L 199 226 L 6 87 L 244 87 L 52 227 L 125 1 Z"/>

上記のソースだと、下記のような意味になります…

座標 X:125,Y:1 から開始(M)
そこから座標 X:199,Y:226 に線を引く(L)
そこから座標 X:6,Y:87 に線を引く(L)
そこから座標 X:244,Y:87 に線を引く(L)
そこから座標 X:52,Y:227 に線を引く(L)
そこから座標 X:125,Y:1 に線を引いて図形を閉じる(Z)

上記ソースのように座標(X,Y)の前にある M とか L にはそれぞれ意味があります。
svg では、6タイプのパスコマンドを定義していて、全部で20個のコマンドがあります。

MoveTo：M, m
LineTo：L,l,H,h,V,v
3次ベジエ曲線：C,c,S,s
2次ベジエ曲線：Q,q,T,t
楕円円弧曲線：A,a
ClosePath：Z,z

コマンドの大小文字には意味・区別があります。
大文字のコマンドは 絶対座標を指定 し、これに対して小文字のコマンドは現在位置からの 相対座標を指定 します。

ブラウザ上で svg を作成

実際に使ってみて『これは便利で簡単！』って感じたサイトをご紹介します。
※Webリテラシーが原始人並みの私でも使えました(￣^￣)ゞ

BoxySVG
高機能で、アプリとしてインストールすることもできます。
Vectr
チュートリアルもありますが、見る必要がないほどシンプルで、最低限の機能が直感的に操作できます。

css を設定する

実際にサンプル用に書いた css が下記になります。

.sampleStar path{
  fill:none;
  stroke:#666;
  stroke-dasharray:1250;
  stroke-dashoffset:1250;
  transition:stroke-dashoffset 2.5s ease-out;
}
.sampleStar:hover path{
  stroke-dashoffset:0;
}

一応1つ1つの css 解説

fill:none：svg の『塗り』をナシに設定
stroke:#666：svg の『線』をグレーに設定
stroke-dasharray:1250：svg の『破線間隔』を1250pxに設定
stroke-dashoffset:1250：svg の『始点』を1250pxに設定
transition:stroke-dashoffset 2.5s ease-out：要素の stroke-dashoffset に対して対応時間・イージングを設定
stroke-dashoffset:0：要素に hover した際の svg の『始点』を0に設定

実際の動きを解説

stroke-dasharray:1250 にて『線部分1250px・隙間1250px』の破線が作成され、stroke-dashoffset:1250 にて『始点を1250px』ズラしてます。
結果『隙間1250px』部分が表示されます(何も表示されないってことですねw)。
要素に hover した際に transition:stroke-dashoffset 2.5s ease-out・stroke-dashoffset:0 が適用になり、実質 2.5秒かけて 1250px の線が表示されていきます。

このようにして上部にある星形の動きを実装しています。
思った以上に単純・簡単ですよね？　の割にはそこそこインパクトがあるのが素敵です☆

少しアレンジした例

Pugったファイル

div
  ol
    - for (var x = 0; x < 60; x++)
      li 
        <svg viewBox="0 0 250 250" x="0px" y="0px" width="250px" height="250px"><path d="M 125 1 L 199 226 L 6 87 L 244 87 L 52 227 L 125 1 Z"/></svg>

css 設定

ol{
  list-style:none;
  position:relative;
  li{
    position:absolute;
    stroke-dasharray:0 1250;
    svg{
      animation:rotate 20s linear infinite;
      path{
        fill:none;
        stroke:#333;
      }
    }
  }
}
@for $i from 0 to 60{
  li:nth-child(#{$i + 1}){
    transform:rotate(#{$i * 6}deg);
    animation:star 0.5s ease-out #{$i / 2 + 0.5}s 1 forwards;
    path{
      opacity:#{($i + 1) / 10};
    }
  }
}
@keyframes rotate{
  0% {transform:rotateZ(0turn)rotateX(0turn)rotateY(0turn);}
  100% {transform:rotateZ(1turn)rotateX(2turn)rotateY(1turn);}
}
@keyframes star{
  0%{stroke-dasharray:0 1250;}
  99.9%,to{stroke-dasharray:1250 1250;}
}