CSS - Improve opacity animation performance in conic gradient - css

Question

I have a CSS animation that has terrible performance if it's size is large, about 800px X 800px
or more, the animation can only be run in newest versions of Chrome or Edge.
See example code. If example is not slow enough add more circles or increase the example size.
The real animation is very similar to this one, this is just a simplified example.
I would like to know if there's a way to improve the performance of this animation.
The conic gradient maybe can be simplified but must look the same!
#property --opacity {
syntax: '<percentage>';
initial-value: 100%;
inherits: false;
}
.test {
display: inline-block;
position: absolute;
border-radius: 100%;
background-image: conic-gradient(
red var(--opacity),
red 10%,
rgba(255, 0, 0, var(--opacity)),
transparent,
transparent
);
will-change: transform, background-image;
width: 800px;
height: 800px;
mask:radial-gradient(circle, transparent 47%, white calc(47% + 1px));
-webkit-mask:radial-gradient(circle, transparent 47%, white calc(47% + 1px));
animation:
conic-gradient
4.5s
ease-out
0s
infinite
none
running;
}
.a {
position: absolute;
right: -10%;
top: 20%;
}
.b {
position: absolute;
right: -10%;
top: 40%;
}
#keyframes conic-gradient {
50% {
--opacity: 0%;
}
85% {
--opacity: 100%;
}
}
<div class="test"></div>
<div class="test a"></div>
<div class="test b"></div>
Is there a way to improve the performance?