It seems a reasonable thing to practice on: it’s not sequenced, and as you say the animation is just a tiny bit of rotation.
Note that when you get to sequenced animation (do this then this then this), CSS will be a nightmare - it’s great for animating one state over a set amount of time (click thing, thing animates, done), more complex stuff you’d want to start looking at JS. Anyway…
No and yes I’m afraid. But:
You’ll probably want the SVG simplified as far as possible, so you’ll want to run it through a tool that does that. There’s one called SVGO: you can do this online here https://jakearchibald.github.io/svgomg/
Afaics you only need to animate four things, so definitely wrap all the shapes that belong to each one in a
<g> element, that’s what you’ll animate (so really, just four CSS classes). This might turn out to be really easy, but it might be really fiddly.
So now you have four
<g> elements, each with a class, and you can apply some kind of wobble animation using CSS’
transform: rotate. There is also a property called
transform-origin which lets you set the origin, which will relative to that element you’re rotating.
Edit: also, AirBnb made this https://airbnb.io/lottie/#/
It works very well.