animateCCで作成したアニメーションをSVGスプライトに変換する手順
![animate-cc](https://raccoonico.com/wp-content/uploads/2019/11/animate-cc-720x480.jpg)
compassを使っていないけどスプライト画像だけ作成したかったので、generatorを探してみました。以下、今回行った手順です。
animate CC でアニメーションを作成する
こんな感じの1秒24フレームのアニメーションをanimate CC上で作成しました。
![](https://raccoonico.com/wp-content/uploads/2019/11/スクリーンショット-2019-11-18-6.37.09-720x477.png)
1コマずつSVG画像を書き出す
PNG画像の連番は次の方法ですべてのフレームが同時に書き出せます。
ファイル → 書き出し → ムービーの書き出し → SVGシークエンスを選択
![](https://raccoonico.com/wp-content/uploads/2019/11/スクリーンショット-2019-11-18-6.50.27.png)
こんな感じで各フレームがSVGとして書き出されます!
![](https://raccoonico.com/wp-content/uploads/2019/11/スクリーンショット-2019-11-18-6.51.35-351x720.png)
ICONIZRでSVGスプライトに変換する
ICONIZRというサイトで個別のSVG画像をSVGスプライトに変換します。
「Start another job」をクリック
![](https://raccoonico.com/wp-content/uploads/2019/11/スクリーンショット-2019-11-18-6.18.05-1-720x387.png)
「drop your SVG icons here」に24個のSVGをドラッグ&ドロップ
![](https://raccoonico.com/wp-content/uploads/2019/11/スクリーンショット-2019-11-18-6.23.41-720x545.png)
オプションを設定してダウンロード
![](https://raccoonico.com/wp-content/uploads/2019/11/スクリーンショット-2019-11-18-6.28.45-628x720.png)
ダウンロードして編集
css/icons/ というフォルダーにpngスプライトとsvgスプライトが作成されています。
また、css / iconizr-svg-sprite.css というファイルにsvgスプライトをbackground-imageで使用した場合のbackground-positionがすべて出力されています。
![](https://raccoonico.com/wp-content/uploads/2019/11/スクリーンショット-2019-11-18-7.01.08-720x429.png)
便利ですね!
作成したSVGスプライトを使ってCSSアニメーションを作成する方法はこちらの記事で紹介しています。