SOURCE

<div class="wrapper">
    <div class="d1"></div>
    <div class="d2"></div>
</div>

*{
    margin: 0;
    padding: 0;
}
.wrapper{
    width: 200px;
    margin: 100px auto;
    position: relative;
}
.d1,.d2{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #f40;
    transform: rotate(65deg);
    clip: rect(0px, 100px, 200px, 0px);
    position: absolute;
}
.d1::after{
    width: 20px;
    height: 20px;
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #fff;
    top: 64px;
    left: 32px;
}
.d1{
    -webkit-animation: we 0.3s ease-in-out infinite alternate;
    animation: we 0.3s ease-in-out infinite alternate;
}
.d2{
    transform: rotate(-65deg);
    animation: we2 0.3s ease-in-out infinite alternate;
    -webkit-animation: we2 0.3s ease-in-out infinite alternate;
    clip: rect(0px 102px 200px 0px);
}

@keyframes we{
    0%{
        transform: rotate(48deg)
    }
    100%{
        transform: rotate(88deg)
    }
}
@keyframes we2{
    0%{
        transform: rotate(-48deg)
    }
    100%{
        transform: rotate(-88deg)
    }
}