解 説

CSS3を使用したアニメーションの例です。
ハートのパスを描いて最後に赤く塗りつぶすものです。仕組みがわかれば簡単に応用できて、見栄えのするパーツを作成できますのでマスターしておきましょう。

サンプル

SVGコード

ハートのパスはIllustratorで描き、SVGで書き出しをしてその際にSVGコードをコピーしてHTMLに貼り付けたものです。そのときに不要なコードは削除しています。

その後適当なクラス名を指定して、あとはCSSの設定を行うだけです。
どんなパスでもクラス名で同様のCSSを適用するだけで同様のアニメーションを作成することができます。

HTMLコード

CSSのポイント

  • stroke:線の色
  • fill:塗り色
  • stroke-width:線幅
  • fill-opacity:必要に応じて塗りの透明度
  • animation:@keyframeの指定とアニメーションする時間やイージングなどの設定
  • animation-fill-mode: forwards:アニメーションの最後に適用されたキーフレームの指定によって計算された値を維持
  • stroke-dasharray:破線を作成
  • stroke-dashoffset:線の位置を指定

stroke-dasharray、stroke-dashoffsetの数値はパスの長さ(実際の長さ以上の値ならOK)に設定します。
stroke-dasharrayで破線の間隔(線が入らない空白部分)をpathの長さに指定すると最初は透明なハートが描かれた状態になります。これをstroke-dashoffset:0にすると破線部分が消えて実線に変わりハートの輪郭の線が引かれます。この操作をアニメーションするとあたかもハートを描いているように描画されるのです。
つまり、このアニメーション設定をSVGのpathにクラスで指定すると常にそのpathを描いているように見えます。
変更するのはstroke-dasharrayとstroke-dashoffsetをpathの実際の長さに変更するだけです。

CSSコード

参考:正確にパスの長さを取得するには次のコードでアラートのパスの長さが表示されますので、その値を使うと良いでしょう。今回はJavaScriptは使用しないため、あくまで仮のスクリプトです。