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

在css关键帧动画中使用translate 2d transform设置元素位置动画时，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
   }
}

这里有一个例子来说明我的意思：

只要在Chrome和IE 10（或Firefox）中打开它，你就会注意到运动平滑度的不同

我意识到可能有很多因素会影响这种行为，比如元素是否以硬件加速绘制

有没有人知道一种修复方法，可以强制浏览器总是在子像素上绘制元素？

我发现了这个类似的问题，但答案是使用平移变换设置动画，这正是我正在做的： .

更新： 在玩了一会儿之后，我找到了一个Firefox的修复程序，但它在IE10中没有做任何事情。诀窍是稍微缩小元素的比例，并在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
   }
}

---

不可能有半个像素的运动，没有这样的事情

---

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

@Nemanja是正确的。你会发现，如果你调整速度，你会看到更好的效果，这在css动画中非常典型。此外，在这种情况下，如果启用硬件加速，也没有什么区别。我整理了一下代码，运行起来没有任何问题，我没有ie10；然而，我有11个。如果translateZ的第二个变换没有在10秒内运行，您可能需要删除它

body {
    background-color: #ccc;
}

.bobbing {
    position: absolute;  
    animation: bobbingAnim ease-in-out .5s infinite;
    -moz-animation: bobbingAnim ease-in-out .5s infinite;
    -webkit-animation: bobbingAnim ease-in-out .5s infinite;    
}

.bobbing.text {
    font-size: 50px;
    color: #000;
    left: 30px;
    top: 30px;
}

.bobbing.image {
    left: 30px;
    top: 150px;
    background: url(http://placehold.it/300x100/aa0000&text=Bobbing+image) 50% 50% no-repeat;
    width: 310px;
    height: 110px;
}

@keyframes bobbingAnim {
   50% {
       transform: translate(0, 12px) translateZ(0);       
   }
}

@-webkit-keyframes bobbingAnim {
   50% {
       -webkit-transform: translate3d(0, 12px, 0);       
   }
}

@-moz-keyframes bobbingAnim {
   50% {
       -moz-transform: translate3d(0, 12px, 0);       
   }
}

我喜欢你的问题！ 注意firefox和IE10中的像素管理单元做得很好

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

这里有一个关于

您需要做的是向元素添加最小旋转。因此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
  }
}

---

嗯…我在IE10上测试了你的原始版本，它似乎工作得很好！（应用修复会使IE 10再次变得不平滑。）你确定原始版本（没有“缩放”）在IE 10上不平滑吗？是的，我确定。对我来说，他们中没有一个是十全十美的。感谢您的报告，它不是一贯的“坏”在IE 10。我想知道决定这种行为的因素是什么。事实上，你是对的。我的第一个评论是不准确的。我一直在IE 10中观察到这种行为，这让我感到困惑：当我加载JSFIDLE并启动动画时，它确实不是平滑的。在我按下JSFIDLE中的“Run”（不做任何更改）之后，它会再次加载，这次动画是平滑的！？我希望

document.msCSSOMElementFloatMetrics=true

（在IE10中启用亚像素精度渲染）可以做到这一点，但它没有成功实现。我想我放弃了：（奇怪的是，在IE 10中，我第一次使用你的JSFIDLE加载时它是平滑的。Chrome是平滑的，Firefox是不稳定的。听说过抗锯齿吗？有没有画过曲线？没有旋转0度或180度的线？像素捕捉肯定是个问题：/像素捕捉的一个很好的例子：