CSS圆形在动画中抖动

Question

CSS圆形在动画中抖动

15

我已经使用CSS画了一个圆形。我尝试通过修改代码来解决这个问题，但无济于事。我的主要问题有两个：

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

我创建了一个fiddle。这是链接： http://jsfiddle.net/r8cqet2c/4/

我做错了什么吗？

- Amit Poojary

我怀疑这可能与硬件加速有关。你可以通过阅读这篇简短的文章受益：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css - Woodrow Barlow

7

在我的 Firefox 浏览器中效果很棒。 - Simply Craig

有趣的是，在Chrome中它看起来并不是一个完美的圆形。 - misterManSam

2

这是Chrome中常见的一个错误，谷歌上有很多关于同样问题的文章。 - user3328557

我没有看到问题 - 这可能是与您的其他代码冲突了。 - Coastal-Cam

7个回答

0

为了使变换更加平滑，避免看起来抖动或破损，您可以将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)

- blacksunshineCoding

0

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

- DruDro

1

W3Schools不是非常可靠的来源。MDN才是。 - unbindall

0

我认为这与抗锯齿和舍入有关。我将背景改为纯黑色，并使动画在一轮后停止。当圆圈静止时，您可以看到抗锯齿使得圆圈的某些部分看起来不太实心，特别是在缩小时。我没有看到晃动或尾巴。

- Miriam Salzer

0

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

也许你使用的分辨率不好或者有一些图形卡问题。

- Héctor León

0

这里独立运行没有问题。（Chrome，Firefox，Safari）

如果您在此处独立运行时遇到问题，则可能是由于您的机器/硬件或浏览器设置引起的。

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

- Coastal-Cam

0

这是由于反锯齿造成的，您可以通过平滑边框来解决它。您可以使用带有内嵌属性的盒阴影代替实心属性的颜色，以防止出现此问题：

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

这里是 jsfiddle 链接，可以查看它的工作原理： http://jsfiddle.net/heartagramir/xdmuvu9s/

- Heartagramir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- krish · Accepted Answer

如果你的圆圈很大，那么浏览器可能需要一些时间才能渲染它们。同时，当你尝试旋转和动画它们时，使用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;

希望能对您有所帮助。