I have been working on creating a circle using CSS, but I've run into some issues that I can't seem to fix. There are two main problems I'm facing:
When viewed in Chrome: The circles shake while rotating.
When viewed in Firefox: A tail-like dot appears when the circle is animating in circular motions.
This is the CSS styling I am currently using:
.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>To see the issue for yourself, check out this fiddle link: http://jsfiddle.net/r8cqet2c/4/
Is there something I may be missing or doing incorrectly?