CSS圈子在动画上摇晃

Question

我在CSS中画了一个圆圈.我尝试使用代码来解决这个问题,但无济于事.我有两个主要问题:

1. 在Chrome中:圆圈在旋转时摇晃

2. 在Firefox中:当圆圈以圆周运动动画时,会出现一个类似尾巴的点.

这是我使用的CSS样式:

.followers_arc_outer{
    position:absolute;
    width:300px;
    height:300px;
    border-radius:100%;
    border:2px solid;
}
.followers_arc_start {
    border-color:transparent #ecd201 #ecd201 #ecd201;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.followers_arc_inner{
    position:absolute;
    top:18px;
    left: 18px;
    width: 280px;
    height:280px;
    border-radius:100%;
    border:2px solid;
    border-color:transparent #ecd201 #ecd201 #ecd201;
}
.o_circle {
    -webkit-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}@keyframes rotation{
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
.i_circle {
    -webkit-animation: rotation2 2s infinite linear;
   animation: rotation2 2s infinite linear;
}
@-webkit-keyframes rotation2 {
    from {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
    to   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}@keyframes rotation2 {
    from {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
    to   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}

<div class="followers_arc_outer followers_arc_start o_circle"></div>
    				<div class="followers_arc_inner followers_arc_start i_circle"></div>

我创造了一个小提琴.这是链接:http: //jsfiddle.net/r8cqet2c/4/

难道我做错了什么？

Answer 1

也许transform-origin和perspective-origin属性可以帮助您：

• http://www.w3schools.com/cssref/css3_pr_transform-origin.asp
• http://www.w3schools.com/cssref/css3_pr_perspective-origin.asp