CSS3过渡“对齐格像素”(CSS3 Transitions 'snap to pixel&

我试图让一个CSS3微妙的背景移动动画，就像在地铁图像瓷砖在Xbox或苹果幻灯片Ken Burns效果。 问题是，CSS3似乎位置值四舍五入到最接近的整数，或不支持子像素渲染，所以结果看起来很生涩。

我在这里做了一个小提琴： http://jsfiddle.net/ykg3b/1/
这里的CSS

.test {
    width: 400px;
    height: 400px;
    background: url('http://img.fusynth.com/600/artists/8.jpg');
    background-size: cover;
    background-position-x: 0.01px;
    -webkit-transform: translateX(0.01px);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-transition: background-position-x 15s linear;
    -moz-transition: background-position-x 15s linear;
    -o-transition: background-position-x 15s linear;
    -ms-transition: background-position-x 15s linear;
    transition: background-position-x 15s linear;
}
.test:hover {
    background-position-x: -100.01px;
    -webkit-transition: background-position-x 15s linear;
    -moz-transition: background-position-x 15s linear;
    -o-transition: background-position-x 15s linear;
    -ms-transition: background-position-x 15s linear;
    transition: background-position-x 15s linear;
}

如果加快动画图像跳动消失，所以它不只是浏览器的滞后。

我也尝试把图像的DIV中具有溢出：隐藏和动画的位置属性。 同样的效果。 我也试图强迫的Webkit做3D渲染。 没有不同。

有没有一种方法来欺骗CSS3到这样做的权利还是我将不得不诉诸帆布或WebGL的？

谢谢！ --Keaton

Answer 1:

问题解决了！ 我的动画位置掩蔽div中，然后设置动画的CSS直接转换变换代替位置。

Answer 2:

有基于JavaScript的解决方案。

http://www.zachstronaut.com/posts/2009/03/04/smoothing-slow-js-animation-parallax.html

文章来源: CSS3 Transitions 'snap to pixel'