Круги CSS в анимации

Я нарисовал круг в CSS. Я попытался поиграть с кодом, чтобы исправить эту проблему, но безрезультатно. У меня есть 2 основных вопроса:

В Chrome: Круги дрожат при вращении
В 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>

Ответы

Ответ 1

Если ваши круги большие, браузеру потребуется время, чтобы их отобразить. И в то же время, когда вы пытаетесь повернуть и оживить их, браузеру будет сложно сделать это плавно с графикой процессора (который браузер использует по умолчанию).

Но вы можете использовать свой графический процессор в своем браузере, используя некоторые аппаратные ускоренные CSS. Это повысит производительность ваших анимаций. Вот код, который вы можете применить к своим кругам, чтобы сделать их более гладкими.

  -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);

или вы можете использовать это ниже одного... оба будут работать.

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

Если вы все еще видите какое-то странное отставание или что-то в хроме или сафари, вам также придется добавить этот код ниже.

-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;

Надеюсь, что это поможет.

Ответ 2

Возможно, свойства transform-origin и перспективы-происхождения могут помочь вам:

Ответ 3

Я думаю, что это связано с сглаживанием и округлением. Я перешел на задний план до простого черного и заставил анимацию остановиться после одного раунда. Когда круги все еще видны, вы можете видеть, что сглаживание делает некоторые части кругов менее прочными, особенно когда вы уменьшаете масштаб. Я не вижу тряску или хвост.

Ответ 4

Любой случай дрожит Я проверил код в Chrome, Mozilla, Opera и Safari (даже работает 5.17)

Возможно, вы используете плохое разрешение или проблему с некоторыми графическими картами.

Ответ 5

Нет проблем здесь автономно. (Chrome, Firefox, Safari)

Если, вы видите проблему здесь автономной; это может быть связано с настройками машины/аппаратного обеспечения или браузера.

Но это, вероятно, какой-то другой код, который у вас есть в вашем приложении конфликтующий, с этим кодом, вызывающим тряску.

Ответ 6

Это происходит из-за сглаживания, и вы можете решить его, сглаживая границу. Вы можете использовать box-shadow с вложенным свойством вместо цвета с твердым свойством, чтобы предотвратить его:

CSS

.followers_arc_outer {
    position:absolute;
    width:300px;
    height:300px;
    border-radius:100%;
    box-shadow: 2px 0px 2px 0px #ecd201 inset;
}

.followers_arc_inner {
    position:absolute;
    top:18px;
    left: 18px;
    width: 280px;
    height:280px;
    border-radius:100%;
    box-shadow: 2px 0px 2px 0px #ecd201 inset;
}

видит скрипку, чтобы увидеть, как она работает: http://jsfiddle.net/heartagramir/xdmuvu9s/

Ответ 7

Чтобы сделать преобразования более плавными и не выглядеть суровыми или оборванными, вы можете reset translate3d до нуля:

.transform {
    -moz-transform: rotate(-4.7deg) translate3d(0, 0, 0);
    -ms-transform: rotate(-4.7deg) translate3d(0, 0, 0);
    -o-transform: rotate(-4.7deg) translate3d(0, 0, 0);
    -webkit-transform: rotate(-4.7deg) translate3d(0, 0, 0);
    transform: rotate(-4.7deg) translate3d(0, 0, 0);
}

Я бы предложил добавить translate3d (0, 0, 0) всякий раз, когда вы используете transform