html - CSS3 过渡 'snap to pixel'

Question

我试图在 CSS3 中获得微妙的背景移动动画，就像 Xbox 上 Metro 中的图像 block 或 Apple 幻灯片中的 Ken Burns 效果一样。问题是 CSS3 似乎将位置值四舍五入到最接近的整数，或者不支持亚像素渲染，所以结果看起来很不稳定。

我在这里做了一个 fiddle :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;
}

如果你加快动画速度，抖动就会消失，所以这不仅仅是浏览器延迟。

我还尝试过将图像放入带有 overflow:hidden 的 div 中并为其位置属性设置动画。同样的效果。我还尝试强制 Webkit 进行 3D 渲染。没有区别。

有没有办法让 CSS3 正确执行此操作，还是我必须求助于 Canvas 或 WebGL？

谢谢! --基顿

Answer 1

问题解决了!我对 mask div 内的位置进行动画处理，然后对 CSS Translate Transform 进行动画处理，而不是直接对位置进行动画处理。