CSS3 过渡“捕捉到像素”答案

【问题标题】：CSS3 Transitions 'snap to pixel'CSS3 过渡“捕捉到像素”
【发布时间】：2013-02-01 18:16:37
【问题描述】：

我试图在 CSS3 中获得微妙的背景移动动画，就像 Xbox 上的 Metro 中的图像块或 Apple 幻灯片中的 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？

谢谢！ ——基顿

【问题讨论】：

标签： html css animation css-transitions

【解决方案1】：

问题解决了！我为掩码 div 内的位置设置了动画，然后直接为 CSS 转换变换而不是位置设置了动画。

【讨论】：

【解决方案2】：

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

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

【讨论】：

哦，我用 CSS 解决了我的问题，但这看起来非常适合作为后备。谢谢！