SOURCE

<svg viewBox="0 0 100 100">
<circle class="qiu yuan1" cx="50" cy="50" r="5"></circle>
<circle class="qiu yuan2" cx="30" cy="50" r="5"></circle>
<circle class="qiu yuan3" cx="70" cy="50" r="5"></circle>
<circle class="da quan1" cx="50" cy="50" r="40"></circle>
<circle class="da quan2" cx="50" cy="50" r="40"></circle>
<circle class="da quan3" cx="50" cy="50" r="40"></circle>
</svg>

.da {
    fill: none;
    stroke-width: 20px;
    stroke-dasharray:  252;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: xuanzhuan 1.5 ease-in-out infinite;
}

.qiu {
    animation: jump 1.5s ease-in-out infinite;
}

.yuan1 {
    fill: yellow;
    animation-delay: 0.4s;
}

.yuan2 {
    fill: red;
    animation-delay: 0.2s;
}

.yuan3 {
    fill: green;
    animation-delay: 0.6s;
}

@keyframes jump {
    0%,
    100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-15PX)
    }
}

@keyframes xuanzhuan {
    0%,
    100% {
       stroke-dashoffset: 252;
    }
    50% {
        stroke-dashoffset: 230;
    }
    100% {
        transform: rotate(360deg);
    }
}

.quan1 {
    stroke: red;
}

.quan2 {
    stroke: skyblue;
    animation-delay: 0.1s;
}

.quan3 {
    stroke: yellow;
    animation-delay: 0.2s;
}