body {
    background-color: #1e272e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.moon{
    background-color: #1e272e;
    width: 250px;height: 250px;
    border-radius: 50%;
    position: relative;
    
}
.moon::before{
    content: '';
    background-color: #fff;
    position: absolute; 
    display: block;
    height: 100%;width: 100%;
    border-radius: 50%;
    z-index: -1;
    animation: 3s moon linear infinite alternate;
}
@keyframes moon{
    0%{
        transform: translateX(50px) scale(0.9);
        box-shadow: none;
    }
    50%{
        transform: translateX(0px 0px) scale(1.02);
        box-shadow: 0 0 10px #fff, 0 0 80px 2px #fff;
    }
    100%{
        transform: translateX( -50px) scale(0.9);
        box-shadow: none;    
    }