SVGアニメーションといえばCSSのみでもいけますよね？
例えばこんな感じで( -`д-´)ｷﾘｯ

<style>
#cloud {
  stroke: salmon;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  stroke-width: 2;
  -webkit-animation: cloud_line 10s linear 0s infinite;
  animation: cloud_line 10s linear 0s infinite;
}
@keyframes cloud_line {
  0% { stroke-dashoffset: 2000; }
  100% { stroke-dashoffset: 0; }
}
@-webkit-keyframes cloud_line {
  0% { stroke-dashoffset: 2000; }
  100% { stroke-dashoffset: 0; }
}
</style>

この方法でも簡単にできますが、もっと簡単にする方法もあるようですね。
それが「lazylinepainter」を使った方法です。

公式
GitHub

SVGファイルの作成、コンパイル

まずはSVGファイルを作成します。※SVGの作り方はここでは省略
SVGファイルを作成したらそのデータをコンパイルしてJSファイル変換します。
それを公式サイトできるので、そちらを開いてドラッグ！

コンパイル

コンパイルするときにいろいろと設定ができるみたいなので設定します。

設定が終わったらDownload Zipを押せば、必要なファイルが落ちてきます。

• lazy-line-painter-1.9.6.min.js
• index.html

この2つのファイルが落ちてきました。
htmlを覗いてみましたが、上のjsファイル以外特に読み込んでいないので
lazy-line-painter-1.9.6.min.jsを読み込むことと
htmlの中にjsが書かれているのでそれをコピー。
※このjsがさっき設定したやつの記載のようですね。
なので変更したかったらこちらをいじればいいようです。
あとはSVGを表示させたい場所にコピーすればこれでOKです。

まとめ

ちょっとしたSVGアニメーションだったら、これでやるほうが簡単かもしれませんね。
コンパイルに手間もそんなにかからないですし簡単にできますね。
実際どう動くかもコンパイルするときに微調整もできるのでわかりやすかったです。

さて皆さん、アニメーションを付けるのにちょっと使ってみてはいかがですか？
以上、髭人でした！