如何使用css3制作动画弧

Question

我制作了这个弧线，但是我无法为它制作动画。你能解释一下如何去做吗

这是我的小提琴 http://jsfiddle.net/cancerian73/23Wjj/

.circle {
width: 60px;
height: 60px;
border-style: solid;
border-radius: 35px;
border-width: 5px;
border-color: #999 transparent transparent transparent;
}
.arc-top {
border-color: #999 transparent transparent transparent;
}

刚刚添加了一个屏幕截图，我希望将0到100或0的灰色填充到类似60的任何颜色。这就是我在看的方式

Answer 1

正如您所评论，请参阅我的回答here，这与您所寻找的类似。

Demo（我在链接的问题上回答的小提琴的修改版本）

---

你甚至在哪里制作弧形动画？这里使用的是带有@keyframe属性的CSS3 transform，并将元素分为3个部分，即0%，50%和100%。休息是自我解释的，animation-duration将控制动画的总持续时间，animation-iteration-count将动画设置为infinite，此处的最后一个animation-timing-function对动画获取非常重要一致的流程。

Demo

.circle {
   -webkit-animation-duration: 5s;
   -webkit-animation-name: animation;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;

   -moz-animation-duration: 5s;
   -moz-animation-name: animation;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;

   animation-duration: 5s;
   animation-name: animation;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   width: 60px;
   height: 60px;   
   border-style: solid;
   border-radius: 35px;
   border-width: 5px;
   border-color: #999 transparent transparent transparent;
}
.arc-top { border-color: #999 transparent transparent transparent;}

@-moz-keyframes animation {
    0% {-moz-transform: rotate(0);}
    50% {-moz-transform: rotate(180deg);}
    100% {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes animation {
    0% {-webkit-transform: rotate(0);}
    50% {-webkit-transform: rotate(180deg);}
    100% {-webkit-transform: rotate(360deg);}
}

@keyframes animation {
    0% {transform: rotate(0);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}

Answer 2

请尝试这段代码，但您可能需要进行一些修改，

工作演示http://codepen.io/anon/pen/Jtepx

这是从CSS 3技巧http://css-tricks.com/css-pie-timer/

修改的