Created attachment 280107 [details] Test for animating 'r' using CSS Tested using Webkit Nightly (9.1.1 (11601.6.17, r201498)) on OSX 10.11.5 The 'r' attribute of an SVG circle cannot be animated using CSS (see attached test). The attached test does work as expected in Chrome (tested using 52.0.2743.10 dev (64-bit)). With reference to https://bugs.webkit.org/show_bug.cgi?id=135978, I expected this to work. fwiw, 'cx' and 'cy' cannot be animated with CSS either.
Created attachment 280158 [details] Test for animating 'r' using SMIL
I think Chrome 45 deprecated SMIL in favor of CSS animations and Web animations. So I am not sure if WebKit has to do the same or it has to support both. The attached test case uses SMIL and it animates in WebKit and Gecko. Gecko does not animate the SVG with CSS animation.
SMIL is an alternative to workaround this in Webkit, but it is also not compatible across browsers (eg IE/Edge do not support SMIL). Gecko should support animating SVG with CSS, but there was a regression (https://bugzilla.mozilla.org/show_bug.cgi?id=908634).
Created attachment 281900 [details] Test demonstrating that animating 'width' and 'height' using CSS does work I'll try another example. Attached is a similar test showing that WebKit does correctly animate the 'width' and 'height' properties of an SVG rect using CSS. Animating 'r', 'cx, 'cy' etc using CSS is supposed to work. It's a (probably trivial) WebKit bug that they don't.
Animating those properties does work. Keep in mind that the properties REQUIRE length units just like with and height. Add a px at the end and they start animating.