CSS circles shaking on animation

Question

I have drawn a circle in CSS. I tried playing around with the code to fix this issue but to no avail. I have 2 main issues :

1. In Chrome : The circles shake while rotating

2. In Firefox : There appears a tail-like dot when the circle is animating in circular motions.

This is the CSS styling I am 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>

I have created a fiddle. Here is the link : http://jsfiddle.net/r8cqet2c/4/

Am I doing something wrong?

Answer 1

If your circles are big then the browsers may take time to render them. And at the same time when you try to rotate and animate them, then it would be hard for the browser to do that smoothly with the CPU graphics(which the browser uses by default).

But you can make use of your GPU in your browser by using some hardware accelerated CSS. Which will boost the performance of you animations. Here is the code you can apply to your circles to make them run smoother.

  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);

or you can use this below one...both will work..

   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);

If you still see some weird lag or something in chrome or safari then you will have to add this below code as well.

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

Hope it helps..