Question

我正在尝试使用这个简单的代码来旋转div：

<!DOCTYPE html>

<html>
<head>
<style>
.spinner {
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
  border-bottom: 1px solid #f00;
  animation: rotate-bottom 1s linear infinite;
}

@keyframes rotate-bottom {
  from {
    transform: rotateX(30deg) rotateY(-60deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(30deg) rotateY(-60deg) rotateZ(360deg);
  }
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>

我使用上面的代码创建了一个jsfiddle：http://jsfiddle.net/zg8vdyns/1/

Chrome和Internet Explorer上的一切正常。红色曲线以无限，平滑和稳定的循环旋转。但是，firefox（39.0）似乎有渲染动画的问题（windows和linux版本）。首先，纺纱线比它应该短得多。其次，动画间歇性地摇摆不定（它不顺畅）。这看起来像一个火狐虫。有没有人对此问题有更深入的了解？

顺便说一下，我知道我应该加上动画＆＃39;动画＆＃39;和关键帧＆＃39;与＆＃39; -moz - ＆＃39;但这不是问题所在。

Answer 1

您的问题是半像素/子像素渲染。围绕并将border-bottom: 1px solid #f00;更改为border-bottom: 3px solid #f00;表示动画正常，但渲染与其他浏览器引擎截然不同...来自StackOverflow的另一个答案：Firefox CSS Animation Smoothing (sub-pixel smoothing)

每个浏览器的渲染引擎明显不同。 Firefox没有对CSS动画实现抗锯齿效果。这本身并不会使它变得更好或更糟，它只取决于你的动画效果。例如，线性过渡在Chrome中可能会出现不必要的模糊。

那说你想要实现的是具有抗锯齿/子像素平滑过渡。我们无法改变引擎呈现的方式，但我们可以操纵动画以使最终用户看起来更柔和。

但是，与链接中的答案提供的方法不同，在您的方案中，我认为有一种更简单的方法可以使渲染更具等效性：http://jsfiddle.net/zg8vdyns/7/

添加border-left: 1px solid rgba(255, 0, 0, 0.7);将有点＆＃34;强制＆＃34; FireFox不自然地渲染半像素/子像素......

<强>更新

@ joshin855也给出了一个很好的答案：添加属性background:rgba(255,255,255,0.01);将有点＆＃34;强制＆＃34;也可以渲染半像素/子像素。你的解决方案非常好......它只有一个填充圆的缺点，这取决于场景可能不合适，但线动画似乎比我的解决方案更相当......所以，它也可能是一个好的溶液

Answer 2

直到该线为点，您可以添加背景：白色;或背景：RGBA（255,255,255，.01）;应该解决问题的元素，使其看起来与其他浏览器类似。对不起，这不是一个很好的答案只是以为我会投入2美分。

.spinner {
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
  border-bottom: 1px solid #f00;
  animation: rotate-bottom 1s linear infinite;
  background:RGBA(255,255,255,.01);

}

http://jsfiddle.net/fqqko0uv/2/

在firefox

2 个答案: