SOURCE

<svg width="800" height="800"  >
    <circle class="option1" cx="400" cy="400" r="35" fill="yellow"></circle>
    <circle class="option2" cx="300" cy="400" r="35" fill="red"></circle>
    <circle class="option3" cx="500" cy="400" r="35" fill="skyblue"></circle>

    <circle class="xuanzhuan big1" cx="400" cy="400" r="250" 
     stroke-width="120px" ></circle>
      <circle class="xuanzhuan big2" cx="400" cy="400" r="250" 
     stroke-width="120px"></circle>
      <circle class="xuanzhuan big3" cx="400" cy="400" r="250"
     stroke-width="120px"></circle>
</svg>

@keyframes jump{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform: translateY(-35px);
    }
}
.option2{
    animation: jump 1.5s ease-in-out infinite;
}
.option1{
    animation: jump 1.5s ease-in-out infinite;
    animation-delay: 0.2s;
}
.option3{
    animation: jump 1.5s ease-in-out infinite;
    animation-delay: 0.4s;
}
.xuanzhuan{
    fill: none;
    stroke-dasharray:1570;
    stroke-dashoffset:1570;
    animation:xuanzhuan 2s ease-in-out infinite;
    transform-origin:center center;
}
@keyframes xuanzhuan{
    0%,100%{
        stroke-dashoffset: 1570; 
    }
    50%{
        stroke-dashoffset: 1450; 
    }
    100%{
        transform: rotate(360deg);
    }
}
.big1{
    stroke: skyblue;

    
}
.big2{
    stroke: yellow;
    animation-delay: 0.2s;
}
.big3{
    stroke: red;
    animation-delay: 0.4s;
}