Я пытаюсь анимировать атрибут радиуса круга SVG с помощью CSS. Хотя (с помощью инструмента Firefox Inspect Element) я вижу, что сама анимация настроена и работает правильно, размер ".innerCircle" не изменяется заметно.
Если вы заметите что-то, что я явно пропустил, или поможете, я был бы очень признателен. Я новичок в этом, поэтому, если я ошибся, пожалуйста, будьте добры!
Я вставил свои файлы внизу для справки.
Еще раз спасибо.
@keyframes buttonTransition {
from {
r: 5%;
}
to {
r: 25%;
}
}
.innerCircle {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: buttonTransition;
}
<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>