Pure CSS UFO Effect

<div class="moon behind">

</div>

<div class="moon">

</div>

html{

    height: 100%;

}

body{

    background-color: #FFE8D4;

    height: 100%;

}

.moon{

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

    background-color: #e5a4cb;

    border-radius: 50%;

    width: 200px;

    height: 200px;

}

@-webkit-keyframes orbit{

    from{

        -webkit-transform: rotateX(0) rotateY(359deg);

    }

    to{

        -webkit-transform: rotateX(359deg) rotateY(-359deg);

    }

}

@keyframes orbit{

    from{

        -webkit-transform: rotateX(0) rotateY(359deg);

        transform: rotateX(0) rotateY(359deg);

    }

    to{

        -webkit-transform: rotateX(359deg) rotateY(-359deg);

        transform: rotateX(359deg) rotateY(-359deg);

    }

}

.moon:before, .moon:after{

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

    -webkit-transform-origin: center center -133.33333px;

    transform-origin: center center -133.33333px;

    -webkit-animation: orbit 3s linear infinite;

    animation: orbit 3s linear infinite;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    z-index: 1;

    content: '';

    width: 40px;

    height: 40px;

    background-color: #bbb;

    border-radius: 50px;

}

.moon:before{

    -webkit-transform-origin: center center -100px;

    transform-origin: center center -100px;

    width: 30px;

    height: 30px;

    background-color: #555;

    opacity: 0.5;

}

.moon.behind:after{

    -webkit-backface-visibility: visible;

    backface-visibility: visible;

}