我正在尝试使用CSS为SVG圆的半径属性设置动画.虽然(使用Firefox Inspect Element工具)我可以看到动画本身设置正确,但".innerCircle"的大小没有明显改变.
如果你能发现任何我明显错过的东西,或者以任何方式帮助我都会非常感激.我对此很陌生,所以如果我错了,请善待!
我已将我的文件粘贴在下面以供参考.
再次感谢.
styling.css:
@keyframes buttonTransition {
from {
r: 5%;
}
to {
r: 25%;
}
}
.innerCircle {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: buttonTransition;
}index.html的:
<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 = …