1

XboxのMetroの画像タイルやAppleのスライドショーのKenBurns効果のように、CSS3で微妙な背景の動きのアニメーションを取得しようとしています。問題は、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;
}

アニメーションを高速化すると、ぎくしゃくした動きがなくなるので、ブラウザの遅延だけではありません。

また、overflow：hiddenを使用してdiv内に画像を配置し、そのpositionプロパティをアニメーション化してみました。同じ効果。また、Webkitに3Dレンダリングを強制してみました。変わりはない。

CSS3をだましてこれを正しく行う方法はありますか、それともCanvasまたはWebGLに頼る必要がありますか？

ありがとう！-キートン

4

2 に答える 2

1

問題が解決しました！マスキング div 内の位置をアニメーション化してから、位置を直接アニメーション化する代わりに、CSS Translate Transform をアニメーション化しました。

于 2013-02-17T02:40:04.373 に答える
0

JavaScript に基づくソリューションがあります。

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

于 2013-02-17T02:39:25.130 に答える