我试图用这个简单的代码旋转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构建）。首先，纺丝线要短得多。其次，动画会间歇性地抖动（不稳定）。这看起来像是Firefox的错误。是否有人对此问题有更深入的了解？
顺便说一句，我知道我应该在“动画”和“关键帧”前加上“ -moz-”，但这不是这里的问题。
最佳答案
您的问题是半像素/亚像素渲染。播放并将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);会“强制”渲染FireFox自然不会产生的半像素/子像素。
更新：
@ joshin855在下面也给出了一个很好的答案：添加属性background:rgba(255,255,255,0.01);也会有点“强制”半像素/子像素的渲染。您的解决方案非常好...它仅具有实心圆的缺点，根据情况可能不适合，但线动画似乎比我的解决方案中的效果更等效...因此，这也可能是一个不错的选择解。