blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。Update:2019/10/31以前はsvg単体のアニメーションを作りましたが(「【SMIL】SVGアニメーションでsvgのキャラ画像を動かそう!」)、今度は前々から気になっていた文字を書くラインアニメーションを調べてみました。作り方はこちらのサイトを参考にさせていただきました。SVGとCSS3でできる筆記体のアニメーションをやってみる今回の目標物はこちら。CodePen.理想は一筆書きアニメーションだったんですが、繊細なパス遣いが求められてしまうため、とにかくラインアニメーションさせたい!という方はこちらがおすすめです。Illustratorでアートボードを作成するアートボードのサイズは、これから入力するテキストエリアの横幅ぴったりのサイズにしましょう。閾値0・曲線精度80%にした場合*POINTここのパスの数が重要!cssでアニメーションさせる際は、パス単位になります。そのため一筆書きアニメーションにしたい場合はパスを1つにする必要があり、フォントをパスでトレースしていく感じになります。終わったらSVG形式でファイルを保存するsvgファイル今のところこんな感じになりました。cssでアニメーションさせる次にcssで先ほどのSVGファイルをアニメーションさせていきます。SVGタグ配下のタグにクラスを付与*下記ではclass=”line数字”を追加しました。cssでアニメーションを実装。SVGアニメーションでは主に以下のcssプロパティを使っていきます。今回のラインアニメーションでは主にstroke-dasharrayとstroke-dashoffseの2つを使います。プロパティがわかったところで、これらを用いてanimationプロパティと@keyframeでアニメーションさせていきましょう。今回はとりあえず全てのパスが同時に同じ動きをするようにしました。CodePen.おまけ一筆書き失敗例パス初心者がやるとこうなる、という例。トレースしたけどパスががたがた。∠):パスって難しい....色々作ってみたフリー素材のSVGファイルを使ってアニメーションさせることもできます。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。