stroke-dasharray/stroke-dashoffsetを使ってSVGのpathをanimateさせようとした際の話。SVGアニメーションの基本については下記が参考になりました。

typographyのアニメーションといえばBéatrice Créations等が有名ですが、画像背景の上でアニメーションさせたいと思い

  • defaultではfill:”none”
  • keyframesにてfill:”none”からfill:”#000”に変化
  • animation-fill-mode:forwardsを設定

を試しました。が…

See the Pen Animate SVG Path: not working in FF by Kei (@kay8) on CodePen.

WebKitではfill=”#000”になるもののFireFoxでは変化せず。IEはそもそもanimationに対応していないので対象外。

調べてるとFirefoxのSVG関連バグについての投稿がいろいろでてきたためこれもバグだろと勝手に思ってましたが、W3Cの19.2.12 The ‘animate’ elementを読めと指摘される。。

Data type <color>によると

Only additive if each value can be converted to an RGB color.

ということで仕様上、noneは指定できないとのこと。WebKitの動きが特殊なだけだと判明。

代替案1

別のアニメーションを作りanimation-delayで開始時間をずらす。

See the Pen Animate SVG Path: using 2 keyframes by Kei (@kay8) on CodePen.

代替案2

fill-opacityを0から1に変化させる。

	.letter {
		position: relative;
		max-width: 1024px;
		margin: 0 auto;
	}
	.letter-svg {
		margin: 0 auto;
		position: relative;
		display: block;
	}

    .letter-svg-3 path{
        stroke:#000;
        fill:#000;
        fill-opacity:0;
        stroke-width:.2;
        stroke-dasharray: 800;
        stroke-dashoffset:800;
        -moz-animation:DASH3 3s ease-in-out 1s forwards;
        -webkit-animation:DASH3 3s ease-in-out 1s forwards;
        animation:DASH3 3s ease-in-out 1s forwards;
    }

    @-webkit-keyframes DASH3{
        0%  {stroke-dashoffset:800;}
		   80%  {stroke-dashoffset:0;fill-opacity:0;}
        100%{stroke-dashoffset:0;fill-opacity:1;}
    }
    @-moz-keyframes DASH3{
        0%  {stroke-dashoffset:800;}
		   80%  {stroke-dashoffset:0;fill-opacity:0;}
        100%{stroke-dashoffset:0;fill-opacity:1;}
    }

See the Pen Animate SVG Path: using fill-opacity by Kei (@kay8) on CodePen.

次からはStack Overflowじゃなくて仕様読むようにします。。