You should take a look at SVG animations, it is better to use SVGs for animation when the elements involved are changing their shapes and are moving along a specified path.
I can't really suggest an end to end tutorial but you can go through these articles to learn about native SVG animations and their CSS alternatives css-tricks.com/guide-svg-animations-smil and css-tricks.com/smil-is-dead-long-live-smil-a-guid…
Also, check out snapsvg.io, a nice library for creating SVG animations and greensock’s morphSVG which is another plugin for playing with SVG shape modifications (greensock.com/morphSVG)
Codrops also does some awesome things with SVGs (tympanus.net/codrops) you can browse through for some inspiration :)