Custom.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background: radial-gradient(#c3911d,#523322);
}
.container{
     width: 350px;
     height: 400px;
     display: flex;
     justify-content: center;
     align-items: center;
     transform-style: preserve-3d;
     transform: perspective(500px) rotateY(135deg);
}
.container span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20%;
    border: 10px solid rgb(48, 112, 27);
    animation: move 8s ease-in-out infinite;
    box-shadow: 2px 4px 20px rgb(4, 5, 0) inset;
    animation-delay: calc(-1s * var(--i));
}
@keyframes move{
    0%{
        transform: translateZ(-100px);
        width: 100%;
        height: 100%;
    }
    25%{
        transform: translateZ(100px);
        width: 100%;
        height: 100%;
    }
    50%{
        transform: translateZ(100px);
        width: 15%;
        height: 15%;
    }
    75%{
        transform: translateZ(-100px);
        width: 15%;
        height: 15%;
    }
    100%{
        transform: translateZ(-100px);
        width: 100%;
        height: 100%;
    }
}