模拟月食的过程Pure Css3

#moon, #dog {
    display: inline-block;
    height: 100px;
    width: 100px;
    position: relative;
    border-radius: 50%;
}

#moon {
    background-color: yellow;
    z-index: 1;
}

@keyframes dog-move {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}

#dog {
    background-color: black;
    z-index: 2;
    animation: 8s dog-move linear infinite;
}