我正在尝试使用这个非常简单的代码来旋转一个 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 构建)。首先，纺 yarn 比应有的短得多。其次，动画时断时续(不流畅)。这看起来像一个 Firefox 错误。有没有人对这个问题有更深入的了解？
顺便说一句，我知道我应该在“动画”和“关键帧”前加上“-moz-”，但这不是这里的问题。
最佳答案
您的问题是半像素/亚像素 渲染。尝试将 border-bottom: 1px solid #f00; 更改为 border-bottom: 3px solid #f00; 表明动画没问题，但渲染与其他浏览器引擎...来自 StackOverflow 的另一个答案:Firefox CSS Animation Smoothing (sub-pixel smoothing)
The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.
That said it appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.
但是，与链接中答案提供的方法不同，在您的场景中，我认为有一种更简单的方法可以使渲染更等效:http://jsfiddle.net/zg8vdyns/7/
添加 border-left: 1px solid rgba(255, 0, 0, 0.7); 会“强制”渲染 FireFox 自然不会呈现的半像素/子像素...
更新:
@joshin855 在下面也给出了一个很好的答案:添加属性 background:rgba(255,255,255,0.01); 也会有点“强制”半像素/子像素的渲染。你的解决方案非常好......它只有一个实心圆圈的缺点，这取决于场景可能不合适，但线条动画似乎比我的解决方案更等效......所以，它也可能是一个很好的解决方案。
关于html - 在 Firefox 中旋转 css 动画故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31622906/