SVG Artistaは、SVGに適用するアニメーションを作成できるWEBサービスです。
プレビューで動きを確認しながら値を設定していけるので、そんなに知識がなくても簡単にSVGアニメーションを作成できます。
SVG Artistaの使い方
SVG Artistaにアクセスして、「OPEN SVG」から作成したSVGファイルをアップロードします。「PASTE MARKUP」からインラインSVGのコードを貼り付けてもOKです。

SVGが読み込まれたら、各種アニメーションの設定を行っていきます。

設定できる内容は以下の通りです。各種設定の値を変更すると、リアルタイムでプレビューがアニメーションします。
element class | クラス名 |
background color | 背景色(プレビューのみ) |
animation type | アニメーションの種類 |
animation duration | アニメーションが完了するまでの時間 |
stagger step | 個々の要素のアニメーション実行タイミングをずらす |
animation delay | アニメーションが実行されるまでの遅延時間 |
animation easing | イージングの種類 |
animation direction/td> | アニメーションの再生方向 |
アニメーションの設定は、「STROKE ANIMATION」と「FILL ANIMATION」に分かれていて、STROKEは外側の枠線、FILLは中の塗りつぶし部分のことです。それぞれ別々にアニメーションを指定します。
アニメーションの設定が完了したら、右上の[GET CODE]をクリックして、SVGのコードとアニメーション用のCSSを取得しましょう。

SVGは[COPY SVG]、CSSは[COPY TRANSITION CODE]もしくは[COPY ANIMATION CODE]のボタンからコードをコピーできます。

ちなみに、CSSの上にある「Autoprefixer」にチェックを入れるとベンダープレフィックスが追加され、「Minify」にチェックを入れるとコードが縮小化されます。
今回用意したサンプルでSVGアニメーションを作成してみたら、以下のようなコードが生成されました。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | < svg id = "svg" data-name = "svg" xmlns = "http://www.w3.org/2000/svg" width = "543.239990234375" height = "228.97000122070312" viewBox = "0 0 543.24 228.97" > < defs > < style > .cls-1 { fill: #444343; stroke: #b2b2b2; stroke-miterlimit: 10; stroke-width: 8px; } </ style > </ defs > < title >svg</ title > < g > < path class = "cls-1 svg-elem-1" d = "M307,576.19l-14.82-3.13a130,130,0,0,1-27.84-9.16A106.4,106.4,0,0,1,241,549.38l18.91-33.65a91.41,91.41,0,0,0,28.88,15.86,103.69,103.69,0,0,0,33.66,5.58q19.95,0,31-6.77t11-19.13v-.15q0-8.64-4.92-13.7a29.12,29.12,0,0,0-12.8-7.45,158.8,158.8,0,0,0-20.25-4.32,3,3,0,0,0-.82-.15,2.57,2.57,0,0,1-.82-.14l-3.28-.45q-21.74-3.42-36-8.56a53.06,53.06,0,0,1-24.27-18q-10-12.87-10-36.55v-.15q0-21,9.38-35.89T287.89,363q17.87-7.81,43.18-7.81a109.76,109.76,0,0,1,23.75,2.68,128.67,128.67,0,0,1,23.75,7.74,132.67,132.67,0,0,1,22,12.21l-17.27,34.54A109.87,109.87,0,0,0,357.2,399a79.2,79.2,0,0,0-26.13-4.76q-18.76,0-29,6.18t-10.28,17.34v.15q0,9.39,5.36,14.82a32.09,32.09,0,0,0,13.25,8,211,211,0,0,0,22.19,5.36,9.94,9.94,0,0,0,1.19.22c.4.05.79.13,1.19.22a17.36,17.36,0,0,1,1.72.38c.54.14,1.11.27,1.71.37q20.55,4,34.32,9.75a53.45,53.45,0,0,1,23,18.46q9.24,12.74,9.24,34.77v.3q0,20.7-9.68,35.44T367,568.44q-18.54,7.75-44.59,7.75Z" transform = "translate(-235.86 -351.22)" ></ path > < path class = "cls-1 svg-elem-2" d = "M419.82,357.45h42l46,144.43,46-144.43h42L523.75,574H491.89Z" transform = "translate(-235.86 -351.22)" ></ path > < path class = "cls-1 svg-elem-3" d = "M775.1,452.9v42.28q0,24.13-9.76,42.52a69,69,0,0,1-27.62,28.44q-17.87,10.05-41.39,10.05-23.69,0-41.77-9.46a67.58,67.58,0,0,1-28-26.73q-9.92-17.26-9.9-40.05V436.07q0-24.12,9.75-42.44A69.11,69.11,0,0,1,654,365.27q17.87-10,41.39-10a80.61,80.61,0,0,1,35.74,8,74.35,74.35,0,0,1,27.33,22.56,82.86,82.86,0,0,1,14.81,33.8H729.24a28.76,28.76,0,0,0-7.37-11.84,34.75,34.75,0,0,0-12.07-7.59,40.36,40.36,0,0,0-14.37-2.61,37.59,37.59,0,0,0-19.13,4.77,32.41,32.41,0,0,0-12.8,13.55A43.47,43.47,0,0,0,659,436.07V500a34.2,34.2,0,0,0,4.62,17.87,30.53,30.53,0,0,0,13.1,11.91,44.06,44.06,0,0,0,19.66,4.17,39.39,39.39,0,0,0,19.28-4.54,30.81,30.81,0,0,0,12.73-13.18q4.47-8.64,4.47-20.4v-3.57H700.05V452.9Z" transform = "translate(-235.86 -351.22)" ></ path > </ g > </ svg > |
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | /*************************************************** * Generated by SVG Artista on 8/28/2019, 9:24:02 PM * MIT license (https://opensource.org/licenses/MIT) * W. https://svgartista.net **************************************************/ svg .svg-elem -1 { stroke-dashoffset: 1033.5794677734375px ; stroke-dasharray: 1033.5794677734375px ; fill: transparent ; -webkit- transition : stroke-dashoffset 1 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0 s, fill 0.7 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0.8 s; transition : stroke-dashoffset 1 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0 s, fill 0.7 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0.8 s; } svg.active .svg-elem -1 { stroke-dashoffset: 0 ; fill: rgb ( 68 , 67 , 67 ); } svg .svg-elem -2 { stroke-dashoffset: 877.4727172851562px ; stroke-dasharray: 877.4727172851562px ; fill: transparent ; -webkit- transition : stroke-dashoffset 1 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0.12 s, fill 0.7 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0.9 s; transition : stroke-dashoffset 1 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0.12 s, fill 0.7 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0.9 s; } svg.active .svg-elem -2 { stroke-dashoffset: 0 ; fill: rgb ( 68 , 67 , 67 ); } svg .svg-elem -3 { stroke-dashoffset: 1075.115478515625px ; stroke-dasharray: 1075.115478515625px ; fill: transparent ; -webkit- transition : stroke-dashoffset 1 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0.24 s, fill 0.7 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 1 s; transition : stroke-dashoffset 1 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 0.24 s, fill 0.7 s cubic-bezier( 0.47 , 0 , 0.745 , 0.715 ) 1 s; } svg.active .svg-elem -3 { stroke-dashoffset: 0 ; fill: rgb ( 68 , 67 , 67 ); } |
アニメーションを実装するために、SVG側にもコードが追加されていました。
なお、上記をそのままHTMLとCSSに貼り付けると、「SVG」という文字がアニメーションします。

あとがき
プレビューを見ながらアニメーションを作成できるので便利ですね。SVGのアニメーションを一から自作するのは非常に面倒なので、こういうサービスはありがたいです。
SVGにアニメーションを実装したい時は、ぜひご活用ください。