How to animate svg with css?

Question

css

There is a rating scale, by clicking on any star it should pulsate a little. Plus, the color fill when hovering over the stars should be smoother.
The problem is that css animation properties do not work on the svg tag. And for some reason, the path tag also does not work https://codepen.io/Raneto4ka/pen/rbXGpz
I would be very grateful if someone tells me why it doesn’t work

Answer 1

For pulsing use @keyframes, transition is enough for everything else
https://codepen.io/anon/pen/bJXXqK

Answer 2

https://css-tricks.com/animating-svg-css/