Hi, Matt here and would like to help you yet you are requiring something nearly impossible.
SVG with CSS animations is neither meant nor practical for complex trigonometric (curve) animations less than usual rotate, skew and zoom translations or "transforms". The example you have provided uses javascript to manipulate SVG object for the same reason.
There is a possibility (from my 4 years of experience working with pure SVG animations) that matrix transformations might do the slow movements of parts of the curve but for the desired effect there would have to be a lot of matrices and/or a lot of repeated SVG objects with changed path coordinates - making all unpractical, long file size and totally against simple and manageable animation rules (e.g. changing the amplitude of wave by simply changing one parameter).
So please expand more if you really require pure SVG+CSS3 solution (cumbersome, could take weeks, occupying 100-300 K - one SVG file alone) or would you rather go with javascript animation library that would add 32 K to total file sizes but would have simple "commands" to control the animation itself.
Best Regards,
Matt