{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
background: radial-gradient(#ffffff),#03042c;
}
.container{
    position: relative;
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(135deg);
}
.container span{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 15px solid white;
    animation: move 8s ease-in-out infinite;
    box-shadow: 0px 0px 10px gray inset;
    animation-delay: calc(-1s * var(--i));
}
@keyframes move{
    0%{
        transform: translateZ(-100%);
        width: 100%;
        height: 100%;
    }
    25%{
        transform: translateZ(100%);
        width: 100%;
        height: 100%;
    } 
     50%{
        transform: translateZ(100%);
        width: 15%;
        height: 15%;
    }
    75%{
        transform: translateZ(-100%);
        width: 15%;
        height: 15%;
    }
     100%{
        transform: translateZ(-100%);
        width: 100%;
        height: 100%;
    }


}