0

2 つの半透明の背景を持つ div のアニメーションがあります。

/* The animated background DIV. */
@-webkit-keyframes wind /*Keyframes*/
{
    0%
    {
        background-position: 0px 0px, 0px 0px;
    }
    100%
    {
        background-position: 370px 370px, 424px 242px;
    }
}

コンマに気づきましたか？使ってるからだよ

#animatedBkg
{
    background-image: url('1.png'), url('2.png');
}

どちらのファイルにもアルファ チャネルが含まれています。

ここで、iPhone でこのコードを高速化したいと思います。だから、私はCPUローダーbackground-positionを次のものに置き換えました-webkit-transform: translate():

/* The animated background DIV. */
@-webkit-keyframes wind /*Keyframes*/
{
    0%
    {
        -webkit-transform: translate(0px, 0px), translate(0px, 0px);
    }
    100%
    {
        -webkit-transform: translate(370px, 370px), translate(424px, 242px);
    }
}

まったく機能しません。しかし、コンマを削除すると、両方の bkg レイヤーが同期して移動します (最初のtranslate()作品のみのようです)が、はるかにスムーズになります。実際、速度差が大きすぎて元には戻れませんbackground-image。

divs: #animatedBkg1とを 2 つにする以外に他のオプションはあります#animatedBkg2か?

よろしく、

4

1 に答える 1

1

さて、translating はobject の移動であり、background-position はobject プロパティであるため、2 つの div が必要なようです。これは #animatedBkg1 と #animatedBkg2 を意味します。

于 2012-06-05T05:27:44.980 に答える