私は SVG の世界にまったく慣れていないことを前置きしておく必要があります。SVG と CSS3 アニメーションを使用したかなり単純な実験で遊んでいます。
Inkscape で SVG を作成し、プレーンな SVG として保存しました。次に、それを HTML に入れて、いくつかの CSS3 アニメーションで遊んでみました。
以下のリンクからわかるように、SVG 全体が奇妙にバウンスします。これは、CSS から .arm クラスを削除することで削除できます。(これにより、arm クラスを持つ単一の赤い円グループが停止します)。
問題は、大きなグループ全体も回転している間に、赤い円のグループをアニメーション化 (回転) させたいことです。
私が間違っているかもしれないアイデアや露骨なことはありますか? （私はそれが最高のSVGではないことを認識していますが、私はただ実験していました）.
http://codepen.io/Fernker/pen/cwvfB
注 1: .arm または .center CSS ルールのいずれかを削除すると、もう少し遊んだ後、ぐらつきは止まりますが、一緒にぐらつきが発生します。