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

Question

在使用css关键帧动画中的translate 2d变换设置其位置动画时,IE 10和Firefox都会将元素捕捉到整个像素.

Chrome和Safari没有,当动画微妙的动作时看起来好多了.

动画按以下方式完成:

@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/.

只需在Chrome和IE 10(或Firefox)中打开它,您就会注意到运动平滑度的差异.

我意识到可能有许多因素会影响这种行为,例如是否使用硬件加速来绘制元素.

有没有人知道一个修复程序试图强制浏览器总是在子像素上绘制元素？

我发现了类似的问题,但答案是使用translate转换动画,这正是我正在做的事情: CSS3 Transitions'snap to pixel'.

更新: 玩了一下之后我找到了Firefox的修复程序,虽然在IE 10中没有做任何事情.诀窍是稍微缩小元素并使用translate3d在Z轴上具有1px偏移:

@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
   }
}

Answer 1

我爱你的问题！很好地通知了firefox和IE10中的像素捕捉。

我前一段时间已经研究了这个主题，建议您访问GSAP论坛，因为它们包含了许多有关Web动画的有用信息。

这是有关IE10像素捕捉问题的主题。

您需要做的是向元素中添加最小的旋转，以便IE和Firefox以不同的方式重绘它-它将永远停止像素捕捉:)

Tyr：

@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
  }
}

Answer 2

不可能有半个像素的移动，不存在这样的事情。

您的问题是动画的速度和平滑度，而不是“像素捕捉”。