CSS3 过渡"对齐到像素"

Question

我正试图在CSS3中获得一个微妙的背景移动动画，就像Xbox上Metro中的图像平铺或苹果幻灯片中的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做对这件事，或者我将不得不求助于Canvas或WebGL？

谢谢！--Keaton

Answer 1

问题已解决！我设置了遮罩div内部的位置动画，然后设置了CSS Translate Transform动画，而不是直接设置位置动画。

Answer 2

有一个基于JavaScript的解决方案。

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