Resizing SVG Circle Radius Using CSS Animation
There is a simple alternative: animate element scale instead of circle radius. As of 2018, it is supported in Edge and all modern browsers.
SMIL animations is deprecated and only supported by browsers for legacy reasons. It may be dropped in the future and will never appear in Edge or some future browsers.
@keyframes buttonTransition {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.innerCircle {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: buttonTransition;
transform-origin: center center;
}<html>
<head>
<link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
</head>
<body>
<svg class = "button" expanded = "true" height = "100px" width = "100px">
<circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
<circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/>
</svg>
</body>
</html>In SVG 1.1 the radius of a circle was an attribute and not a CSS property. SVG 2 changes this and instead makes the circle's radius a CSS property that's mapped to an attribute.
CSS animations animate CSS properties and do not animate attributes.
Firefox has now implemented this part of the SVG 2 specification so the testcase in the question will work now although it didn't when the question was written.
SMIL animations will work on attributes (and CSS properties).
<html>
<head>
<link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
</head>
<body>
<svg class = "button" expanded = "true" height = "100px" width = "100px">
<circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
<circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000">
<animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/>
</circle>
</svg>
</body>
</html>