CSS3 Transitions 'snap to pixel'

问题:

I am trying to get a subtle background movement animation in CSS3, much like image tiles in Metro on the Xbox or the Ken Burns effect in Apple Slideshows. The problem is that CSS3 seems to round the position value to the nearest integer, or doesn't support sub-pixel rendering, so the result looks very jerky.

I made a fiddle here: http://jsfiddle.net/ykg3b/1/
Here's the 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;
}

If you speed up the animation the jerkiness goes away, so it's not just browser lag.

I've also tried putting an image inside a div with overflow:hidden and animating its position property. Same effect. I also tried forcing Webkit to do 3D rendering. No difference.

Is there a way to trick CSS3 into doing this right or am I going to have to resort to Canvas or WebGL?

Thanks! --Keaton

回答1:

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

回答2:

There is a solution based on JavaScript.

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