CSS 关键帧动画与平移变换在 IE 10 和 Firefox 中捕捉到整个像素

看起来 IE 10 和 Firefox 在使用 css 关键帧动画中的平移 2d 变换对元素的位置进行动画处理时，都会将元素捕捉到整个像素。

Chrome 和 Safari 没有，看起来a lot制作微妙运动动画时效果更好。

动画是通过以下方式完成的：

@keyframes bobbingAnim {
   0% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: translate(0px, 12px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
}

这是我的意思的一个例子：

http://jsfiddle.net/yZgTM/ http://jsfiddle.net/yZgTM/.

只需在 Chrome 和 IE 10（或 Firefox）中打开它，您就会注意到运动平滑度的差异。

我意识到可能有很多因素影响此行为，例如元素是否使用硬件加速绘制。

有谁知道尝试强制浏览器始终在子像素上绘制元素的修复方法？

我发现了这个类似的问题，但答案是使用平移变换来制作动画，这正是我正在做的：CSS3 过渡“对齐像素” https://stackoverflow.com/questions/14917292/css3-transitions-snap-to-pixel.

Update:经过一番尝试后，我找到了针对 Firefox 的修复程序，但在 IE 10 中没有执行任何操作。诀窍是稍微缩小元素并使用在 Z 轴上偏移 1px 的 translate3d：

@keyframes bobbingAnim {
   0% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out
   }
}

我喜欢你的问题！ 很好地注意到了 Firefox 和 IE10 中的像素捕捉。

我不久前研究过这个主题，建议您查看 GSAP 论坛，因为它们包含许多有关网络动画的有用信息。

这是一个关于IE10 像素捕捉问题 http://greensock.com/forums/topic/12698-scaling-animation-issues-in-ie10-and-11/.

您需要做的是向元素添加最小旋转。这样 IE 和 Firefox 就会以不同的方式重新绘制它 - 这将永远停止像素捕捉:)

提尔这个：

@keyframes bobbingAnim {
  0% {
   transform: translate(0px, 0px) rotateZ(0.001deg);  
   animation-timing-function:ease-in-out
  }

  50% {
    transform: translate(0px, 12px) rotateZ(0.001deg);
    animation-timing-function:ease-in-out
  }

  100% {
   transform: translate(0px, 0px) rotateZ(0.001deg);
   animation-timing-function:ease-in-out
  }
}