为自定义几何图形创建动画

Question

我有一个自定义的几何图形，表示为矩形，左右两侧都有圆圈，我需要使用HTML \ CSS \ JS制作动画。带有渐变线的点应始终以相同的速度移动。 这是一个应该如何显示的示例：

我尝试使用圆形动画，但是不允许以相同的速度移动。 HTML：

<div class="countdown-bid"><span>10d : 01h : 20m : 59s</span></div>

CSS：

.countdown-bid, .countdown-bid span{
  position: relative;
    border-radius: 30px;
}

.countdown-bid{
  padding: 2px;
    overflow: hidden;
    margin-right: 20px;
    width: 400px;
}

.countdown-bid span {
    z-index: 5;
    background: #fff;
    display: block;
    height: 62px;
    text-align: center;
    line-height: 62px;
    font-weight: 800;
    font-size: 30px;
}

.countdown-bid:before {
    content: "";
    display: block;
    top: 50%;
    left: 50%;
    width: 450px;
    height: 450px;
    margin-top: -225px;
    margin-left: -225px;
    position: absolute;
    z-index: 1;
    background-image: image is too large
    background-repeat: no-repeat;
    background-size: 100%,auto;
    background-position: 50%;
    -webkit-animation-name: rotateCountdown;
    animation-name: rotateCountdown;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    opacity: .5;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}


@keyframes rotateCountdown {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    to {
        -webkit-transform: rotate(-270deg);
        transform: rotate(-270deg)
    }
}

数据图像很大，可以粘贴为代码。 http://jsfiddle.net/eq9y42nj/5

中提供了示例