Question

我试图在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中：隐藏并设置其position属性的动画。同样的效果。我还尝试强制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

CSS3 Transitions'对齐像素'

2 个答案: