TweenMaxを使ったSVGラインアニメーション - Qiita

祝Qiita初投稿！ 簡単なSVGアニメーションならわざわざSVGのライブラリ入れなくても実装できるぞってことで復習がてらに書いていきます。 今回はよく使うラインアニメーションに絞りました。 ラインアニメーションって何？ 文字通り線に沿って実行されるアニメーションで、よくイラレやフォトショで文字をアウトライン化しておいて！なんて言われると思いますが、アウトライン化することで文字の周りにパスが生成されます。 この「パス」がラインアニメーションに置ける「ライン」となります。 よくあるアニメーションでは、文字の外側にラインが引かれて最後に色が付くみたいなアニメーションもラインアニメーションです。 ラインアニメーションで押さえておきたいCSSプロパティ stroke - 線の色を変更できる stroke-width - 線の太さを変更できる stroke-opacity - 線の半透明度を変更でき