16

在使用 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）中打开它，您就会注意到运动流畅度的差异。

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

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

我发现了这个类似的问题，但答案是使用翻译变换制作动画，这正是我正在做的事情： CSS3 Transitions 'snap to pixel'。

更新： 玩了一会儿后，我找到了 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
   }
}
4

3 回答 3

5

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

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

这是关于IE10 像素快照问题的主题。

您需要做的是为元素添加一个最小的旋转。如此一来，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
  }
}
于 2016-06-15T07:34:25.320 回答
0

@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);       
   }
}
于 2013-12-11T01:39:50.297 回答
-4

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

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

于 2013-08-18T21:13:23.820 回答