アニメーション応用編です。前回の続きであります。今回は文字の塗りにグラデーションをつけます。前回は、全部同時にアニメーションが開始していたので、3つに分けていきます。「鳥のイラスト」「manaka」「design」の3つに分けて順番にアニメーションさせます。3つを順番にアニメーションさせて、最後にグラデーションのついた塗りが現れるようにします。</linearGradient></defs>上記の謎のタグをsvg開始タグの直下に入れて下さい。defsやlinearGradientはsvg専用のタグです。「manaka」「design」は違う色にしたいので、idをつけて2種類のグラデーションパターンを設定します。今回は「design」を#000,#ccc。「manaka」をdarkred,goldにしました。defsの中に2つのlinearGradientがあるのが確認できますよね。csscssは以下の感じです。それを先ほど指定したidの情報を「url("#MyGradient")」といった記述で呼び出します。それとパスごとにanimationを設定します。線を描く指定drawlineと塗りの指定fillinの2つの指定をしました。複数指定する場合は「,」で区切る。すれば沢山指定できます。animationとdrawlineの秒数を微調整します。※今回cssアニメーションの詳細については省略すます。path{/*何秒後に開始するか書かない時はページが読み込まれた時となる。線に効果をつけるには?線にぼかし等の効果を付ける事が出来ます。イラストレーターになんと!SVGフィルターなるものがありました。効果ーSVGフィルターそれで書き出されたidの内容は他にも応用できる。SVGフィルターでぐぐってみよう。いずれかを書くと、animation-fill-modeの指定ができます。https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-modeこれは、アニメーションの開始前の状態に、@keyframesの0%を適用するか、と、アニメーションの終了後に、@keyframesの100%を適用するか、を指定するもの。「隠した要素をanimationで出すアニメ」にしたい時(opacityが0から1とか。animation-fill-modeを指定して、以下の様にすれば、この問題が解決できます。design2014-05-15。