Why is this little css animation SO SLOW?

I'm assuming SVG and opacity don't make for a smooth animation? I actually assumed this would be the best / most efficient way to achieve what I wanted but the FPS is incredibly low.

http://codepen.io/Ampix0/pen/MJRLMP

On a side note, anyone know of a more programmatic way in CSS to have each ring fade at different intervals without creating more animations? Just trying to make the code as efficient as possible, without using JS.