* 
{
    margin: 0;
    padding: 0;
}

body 
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #111;
}

.container
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.container .box
{
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 100px 0;
}
.container .box span
{
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: animate 5s linear infinite;
    animation-delay: calc(-0.5s * var(--i));
}

.container .box:nth-child(2) span
{
    border: none;
    background: rgba(144, 0, 144, 0.3);
}

@keyframes animate
{
    0% {
        width: 0;
        height: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 500px;
        height: 500px;
        opacity: 0;
    }
}