Creating a donut with CSS - html

Question

Trying to create a donut transforms from none to 65deg, but got stuck where the animation spins rather than increasingly transform. My CSS and HTML are as follows...any pointers?
.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
*/
}
}
<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>
So basically I want to to have a grow effect (transforming from none to 65 deg) using CSS - similar to this this: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-activity/