Custom Animation not working

Hi folks. Working on porting a website with Webstudio to do some performance testing, and I've hit a small snag. Trying to animate a SVG and it doesn't seem to work.

How I went about it is to have a HTML embed into a button, and then another HTML embed with visible=false, where I've added the CSS code that does the animation. However, when I try to bring it live, the animation is not working.

Code for the SVG:
<svg class="svg-area" width="16px" height="16px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(25,25)">
<circle id="core" cx="0" cy="0" r="6" fill="#86CC16"></circle>
<circle id="radar" cx="0" cy="0" r="6" fill="#86CC16"></circle>
</g>
</svg>

Code for the CSS:
body{
font: 62.5%;
}
p {
width: 100%;
font-size: 1.1rem;
text-align: center;

.title {
margin-top: 1rem;
}
}
.svg-area {
display: block;
margin: 0 auto 0rem;
background: #efefef;
}
#core {
fill: #ff4f81;
animation: pulse1 1.5s ease-in-out infinite;
}

#radar {
fill: rgba(#ff4f81, .5);
animation: pulse2 1.5s ease-in-out infinite;
}
@keyframes pulse1 {
0% {
opacity: 0;
transform: scale(0);
}

30% {
opacity: 1;
transform: scale(1.5);
}

60% {
opacity: 1;
transform: scale(2);
}

100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes pulse2 {
0% {
transform: scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(6, 6);
opacity: 0;
}
}

Would appreciate any help that could tell me what I'm doing wrong