Add border to scaling circles animation - css

Question

I'm implementing waves animation similar to this:
I want to make the 2px border for each transparent wave circle - what is the best way to achieve this (preferably without width/height animation)?
Currently I'm animating box-shadow property and seems I'm unable(?) to use several shadows to imitate the border as long as I need them to be half-transparent. Also I'm unable to use scale as border-width will be scaled as well. The only way I see here is to animate the actual width/height of each <i> element but I don't think this animation will be smooth on all devices(?)
:root {
--size: 6px;
--duration: 1000ms;
}
body {
background: #333;
}
.blinker {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
z-index: 3;
background: #fdfdf9;
width: var(--size);
height: var(--size);
border-radius: 50%;
}
.blinker i {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
opacity: 1;
}
.blinker i:nth-child(1) {
animation: blinkBoxShadow var(--duration) ease-out infinite;
display: block;
border: 1px solid white;
}
#keyframes blinkBoxShadow {
from {
box-shadow: 0 0 0 30px trasparent;
background: transparent;
opacity: 1;
}
to {
box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.7);
opacity: 0;
}
}
.blinker i:nth-child(2) {
transform: translateX(-50%) translateY(-50%);
width: 61px;
height: 61px;
animation: blinkBoxShadow2 var(--duration) ease-out infinite;
animation-delay: calc(var(--duration) - 200ms);
}
#keyframes blinkBoxShadow2 {
from {
box-shadow: 0 0 0 0px rgba(255, 179, 117, 0.7);
opacity: 0;
}
50% {
opacity: 0.5;
}
to {
box-shadow: 0 0 0 50px rgba(255, 179, 117, 0);
opacity: 0;
}
}
.blinker i:nth-child(3) {
background: white;
}
<div class="blinker">
<i></i>
<i></i>
<i></i>
</div>

Answer 1

If I'm understanding correctly - You can't use box-shadow property, because of it's non-transparent?
If yes, you can set the color of the shadow by using rgba() function, where the last parameter is alpha (transparency) channel value. You can see how it's done on CodePen projects when you type in search bar - 'pulse'.
If no, if you would use JS to animate width/height I think it wouldn't be a efficiency problem on most mobile devices.

Answer 2

I think border should work. Remove box-shadow and animate it on width and height.
See the Snippet below:
:root {
--size: 6px;
--duration: 1000ms;
}
body {
background: #333;
}
.blinker {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
z-index: 3;
background: #fdfdf9;
width: var(--size);
height: var(--size);
border-radius: 50%;
}
.blinker i {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
opacity: 1;
}
.blinker i:nth-child(1) {
animation: blinkBoxShadow var(--duration) ease-out infinite;
display: block;
border: 2px solid rgba(255, 255, 255, 0.5);
}
#keyframes blinkBoxShadow {
from {
/*box-shadow: 0 0 0 30px trasparent;*/
background: transparent;
opacity: 1;
width:0px;
height:0px;
}
to {
/*box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.7);*/
background: rgba(255, 255, 255, 0.7);
opacity: 0;
width:61px;
height:61px;
}
}
.blinker i:nth-child(2) {
transform: translateX(-50%) translateY(-50%);
width: 61px;
height: 61px;
animation: blinkBoxShadow2 var(--duration) ease-out infinite;
animation-delay: calc(var(--duration) - 500ms);
}
#keyframes blinkBoxShadow2 {
from {
/*box-shadow: 0 0 0 0px rgba(255, 179, 117, 0.7);*/
background:transparent;
opacity: 0;
border:2px solid rgba(255, 179, 117, 0);
width: 61px;
height: 61px;
}
50% {
opacity: 0.5;
}
to {
/*box-shadow: 0 0 0 50px rgba(255, 179, 117, 0);*/
background:rgba(255, 179, 117, 0.2);
opacity: 0;
width:140px;
height:140px;
border:2px solid rgba(255, 179, 117, 0.2);
}
}
.blinker i:nth-child(3) {
background: white;
}
<div class="blinker">
<i></i>
<i></i>
<i></i>
</div>