SVG keyframe not animating radius and coordinates in Firefox/Safari - svg

Question

I've been trying to re-create the Google Ripple effect for buttons. You can see it: here
It works in Chrome, but only in chrome. And I can't seem to figur out why.
I am making the ripple like this: On click, create an svg inside the button. Which is placed at the right position using mouse coordinates. Then it is animated trough css keyframe animations, which animate the circle radius (r="*").
css:
body .custom-container .btn-custom .ripple-svg circle {
opacity: 0;
transform: traslateZ(0);
-webkit-animation: flowAnimation 1s;
-moz-animation: flowAnimation 1s;
-o-animation: flowAnimation 1s;
animation: flowAnimation 1s;
}
#-webkit-keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
#-moz-keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
#-o-keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
#keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
JS:
// Mouse coordinates in button
var MousePosX
var MousePosY
var offset = $("#flow-button").offset();
// Set coordinates on mouse move
$('#flow-button').on( "mousemove", function( event ) {
MousePosX = ( event.pageX - offset.left);
MousePosY = ( event.pageY - offset.top + 15);
});
// Ripple effect
$('#flow-button').on("click", function(){
// Append svg circle on each click
$('#flow-button').append('<svg class="ripple-svg" height="100%" width="100%"><circle r="10" fill="black" /></svg>');
// Append is following mouse coordinates
$('.ripple-svg circle').css({
cx: MousePosX,
cy: MousePosY
});
// On multiple clicks delete all but the last one
if ($('.ripple-svg').length > 2) {
$('.ripple-svg:not(:last-child)').remove();
}
});
Anyone any idea?

Answer 1

In SVG 1.1 radius (r) is an attribute and not a CSS property. In SVG 2 it is proposed that most attributes should become CSS properties.
SMIL can animate both attributes and CSS properties but CSS animations can only animate CSS properties.
Chrome has implemented this part of the SVG 2 specification (to see how feasible it is). No other UA has done so yet but in the future any of them might do so.