使用CSS创建甜甜圈

Question

尝试创建一个甜甜圈从无变换到65度，但在动画旋转的地方被卡住而不是越来越多地变换。我的CSS和HTML如下......任何指针？

＆＃13;

＆＃13;

.aft{
    position: relative;
    width: 200px;
    height: 100px;
    margin-left: 472px;
}
.aft li{
    margin-bottom: 5px;
}
.aft::before,
.chart-skills::after {
    position: absolute;
}

.aft::before {
    content: '';
    width: inherit;
    height: inherit;
    border: 45px solid rgba(211,211,211,.3);
    border-bottom: none;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}

.aft::after {
    content: '';
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    /*font-size: 1.1rem;*/
    font-weight: bold;
    color: cadetblue;
}

.aft li {
    position: absolute;
    top: 100%;
    left: 0;
    width: inherit;
    height: inherit;
    border: 25px solid;
    border-top: none;
    border-bottom-left-radius: 175px;
    border-bottom-right-radius: 175px;
    transform-origin: 50% 0;
    animation-fill-mode: forwards;
    animation-duration: .4s;
    animation-timing-function: linear;
}
.aft li{
    z-index: 4;
    border-color: #FF5D5D;
    animation-name: rotate-one;
}

@keyframes rotate-one {
    100% {
        transform: rotate(90deg);
        /**
         * 12% => 21.6deg
         */
    }
}

＆＃13;

<div class="form-container" id="form" style="display: block;">
    <div class="fd2" style="display: block;">
        <p class="quick" id="surv">
            <h1 id="cp">Quick Survey</h1>
        </p>
        <div class="motherbox">
            <div class="one" id="first">
            <p>1&nbsp </p>
                <div class="circle1"></div>
                <span class="label">0<span class="smaller">%</span></span>
            </div>
            <div class="two" id="second">
            <p>2&nbsp </p>
                <div class="circle2"></div>
                <span class="label2">65<span class="smaller">%</span></span>
            </div>
            <div class="three" id="three">
            <p>3&nbsp </p>
                <div class="circle3"></div>
                <span class="label3">100<span class="smaller">%</span></span>
            </div>
            <ul class="aft"><li><span>&nbspAfter Completion</span></li>
            </ul>
            </div>
            <br style="float: left;">
        </div>
    </div>
</div>
<div class="clear"></div>
<div id="pulsor">Start Survey</div>

＆＃13;

＆＃13;

＆＃13;

所以基本上我想要使用CSS产生增长效果（从无变换到65度） - 类似于此：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-activity/