小编sim*_*erc的帖子

我img使用一些javascript切换一个类来为css 设置动画.此类将转换属性添加到img已经具有转换的转换.这样我就可以在3秒内将此图像从0px移动到10px.

http://codepen.io/poolboy/pen/swcup

img {
  transition: transform 3s ease-in-out;
}

img.trans {
  transform: translateX(10px) translateZ(0);
}

var myImg = document.getElementsByTagName('img');

setInterval(function(){
  myImg[0].classList.toggle('trans');  
}, 3000)

使用Chrome时,此动画很流畅,但图像变得模糊.使用Firefox,转换是逐个像素的(所以不是平滑的,我们可以看到过渡中的步骤)但图像不会变得模糊.

在这种情况下,图像有3个seconde移动到+ 10px,这意味着在1seconde动画时,图像应该距离其起始点3,33px的距离.Firefox似乎是这样的:"3,33px是不可能的,所以我将图像留在3px"(如果图像应该是3,51px,可能他将它移动到4px).Chrome似乎更像是这样:"3,33px是不可能的,所以我尝试重新渲染图像来制作它,但图像降级了"

不确定我的推理,但事实是,这两个动画都非常难看,有什么解决方案,在长时间内通过一点像素移动图像？是否可以在这两者之间进行相同的渲染？