1

我试图在 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？

谢谢！——基顿

4

2 回答 2

1

Problem Solved! I animated the position inside of a masking div and then animated a CSS Translate Transform instead of the position directly.

于 2013-02-17T02:40:04.373 回答
0

There is a solution based on JavaScript.

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

于 2013-02-17T02:39:25.130 回答