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

如果您的圈子很大，那么浏览器可能需要一些时间来呈现它们。同时，当您尝试对它们进行旋转和动画处理时，浏览器很难使用 CPU 图形（浏览器默认使用）平滑地做到这一点。

但是您可以通过使用一些硬件加速 CSS 在浏览器中使用 GPU。这将提高动画的性能。以下是您可以应用到您的圈子以使其运行更顺畅的代码。

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

如果您仍然在 chrome 或 safari 中看到一些奇怪的延迟或某些东西，那么您也必须在下面添加此代码。

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

希望对你有帮助..

Answer 2

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

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

Answer 3

我认为这与抗锯齿和舍入有关。我将背景更改为纯黑色，并在一轮后停止动画。当圆圈静止时，您可以看到抗锯齿使圆圈的某些部分看起来不那么立体，尤其是当您放大较小时。我没有看到摇晃或尾巴。

Answer 4

任何情况都在晃动 我检查了 Chrome、Mozilla、Opera 和 Safari 中的代码（甚至 5.17 都在工作）

也许你使用的分辨率不好或显卡有问题。

Answer 5

在这里单机没问题。 （Chrome、Firefox、Safari）

如果您在此处单独看到问题；这可能与您的机器/硬件或浏览器设置有关。

但您的应用程序中的其他代码可能与此代码冲突导致抖动。

Answer 6

这是由于抗锯齿而发生的，您可以通过平滑边框来解决它。您可以使用带有 inset 属性的 box-shadow 而不是带有 solid 属性的 color 来防止它：

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/

Answer 7

为了使变换更加平滑并防止看起来不整齐或破烂，您可以将 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);
}

我建议在使用 transform 时添加 translate3d(0, 0, 0)