在Firefox中旋转CSS动画故障
[英]Rotate css animation glitchy in firefox
问题描述
I am trying to rotate a div with this dead-simple code: 
我试图用这个简单的代码旋转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>
I created a jsfiddle using the code above: http://jsfiddle.net/zg8vdyns/1/ 我使用上面的代码创建了一个jsfiddle： http : //jsfiddle.net/zg8vdyns/1/
Everything works fine on Chrome and Internet Explorer. 在Chrome和Internet Explorer上一切正常。 A red curved line rotates in an endless, smooth and steady loop. 红色曲线以无休止，平滑且稳定的循环旋转。 However, firefox (39.0) seems to have issues rendering the animation (both the windows and linux build). 但是，firefox（39.0）似乎在渲染动画时遇到问题（Windows和Linux构建）。 First, the spinning line is much shorter than it should be. 首先，纺丝线要短得多。 Second, the animation keeps faltering intermittently (it is not smooth). 其次，动画会间歇性地抖动（不流畅）。 This looks like a firefox bug. 这看起来像是Firefox的错误。 Does anyone have a deeper insight into this issue? 是否有人对此问题有更深入的了解？
Btw I know I should probably prefix 'animation' and 'keyframes' with '-moz-' but that is not the issue here. 顺便说一句，我知道我应该在“动画”和“关键帧”前加上“ -moz-”，但这不是这里的问题。
2 个解决方案
解决方案1
1 已采纳 2015-07-25 04:44:29
Your issue is half-pixel/sub-pixel rendering. 您的问题是半像素/亚像素渲染。 Playing around and changing border-bottom: 1px solid #f00; 玩耍并更改border-bottom: 1px solid #f00; to border-bottom: 3px solid #f00; 到border-bottom: 3px solid #f00; shows that animation is ok, but the rendering is very different from other browser engines... From another answer here of StackOverflow: Firefox CSS Animation Smoothing (sub-pixel smoothing) 表示动画还可以，但是呈现方式与其他浏览器引擎完全不同... StackOverflow的另一个答案是： Firefox CSS动画平滑（亚像素平滑）
The rendering engines for each browser is obviously different.
That said it appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions.
But, differently from the approach provided by the answer in the link, in your scenario I think that there is a easier way to make the rendering more equivalent: http://jsfiddle.net/zg8vdyns/7/ 但是，与链接中答案提供的方法不同，在您的情况下，我认为有一种更简单的方法可以使渲染更加等效： http : //jsfiddle.net/zg8vdyns/7/
Adding border-left: 1px solid rgba(255, 0, 0, 0.7); 添加border-left: 1px solid rgba(255, 0, 0, 0.7); will kinda "force" the rendering of the half-pixels/sub-pixels that FireFox doesn't naturally... 将有点“强迫” FireFox不自然地渲染半像素/子像素...
Update: 更新：
@joshin855 also give a great answer below: adding the property background:rgba(255,255,255,0.01); @ joshin855在下面也给出了一个很好的答案：添加属性background:rgba(255,255,255,0.01); will kinda "force" the rendering of the half-pixels/sub-pixels too. 也会有点“强制”半像素/子像素的渲染。 Your solution is very nice... It only have the disadvantage of a filled circle which depending on the scenario may not be suitable, but the line animation seems even more equivalent than in my solution... So, it also may be a good solution. 您的解决方案非常好...它仅具有实心圆的缺点，根据情况可能不适合，但线动画似乎比我的解决方案中的效果更等效...因此，这也可能是一个不错的选择解。
解决方案2
1 2015-07-25 04:57:53
As far the line being a dot you can add background:white; 只要线条是点，您可以添加background：white; or background:RGBA(255,255,255,.01); 或背景：RGBA（255,255,255，.01）; to the element which should fix the problem and make it look similar to other browsers. 到应该解决该问题并使它看起来与其他浏览器相似的元素。 Sorry it's not a great answer just thought I would throw in my 2 cents. 抱歉，单单以为我会给我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/ http://jsfiddle.net/fqqko0uv/2/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.