• HTML
• CSS

HTML

<div></div>
<div></div>

CSS

body{
    background-color:#f7c607;
    padding:0;
    margin:0;
}
div:nth-child(1){
    height:120px;
    width:120px;
    box-sizing:border-box;
    border:8px solid #ffffff;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    right:0;
    left:-120px;
    border-radius:50%;
    background-color:#f7c607;
    animation:move1 1.5s infinite;
}
@keyframes move1{
    50%{
        left:120px;
        z-index:0;
    }
    51%{
        z-index:2;
    }
    100%{
        left:-120px;
        z-index:2;
    }
}
div:nth-child(2){
    height:120px;
    width:120px;
    background-color:#ffffff;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:120px;
    right:0;
    border-radius:50%;
    animation:move2 1.5s infinite;
}
@keyframes move2{
    50%{
        left:-120px;
    }
    100%{
        left:120px;
    }
}