Could someone please help me understand why there is a little blue circle appearing on the bottom right edge of the white circle at the end of my animation? I have tried resetting the animation from 100% to 0% but it hasn't helped.
The code is written in SCSS and you can find it on this CodePen link: Code Pen
SCSS:
*{box-sizing: border-box;}
.content-wrapper{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
position: absolute;
}
.ping{
border-radius: 50%;
position: absolute;
z-index: -1;
animation: ping 1.6s ease-out infinite;
}
@keyframes ping{
0% {
width: 60%;
height: 60%;
left: 20%;
top: 20%;
border: 80px solid rgba(102, 217, 255, .5);
}
80% {
width: 160%;
height: 160%;
left: -30%;
top: -30%;
border: 4px solid rgba(102, 217, 255, 1);
}
99% {
opacity: 0;
}
100% {
border: 0px solid rgba(102, 217, 255, 1);
width: 0%;
height: 0%;
left: 0%;
top: 0%;
}
}
HTML:
<div class="content-wrapper">
<div class="box">
<div class="ping"></div>
</div>
</div>