0

我有一个具有两个半透明背景的 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');
}

这两个文件都包含 Alpha 通道。

现在，我想在 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和之外还有其他选择#animatedBkg2吗？

问候，

4

1 回答 1

1

好吧，因为翻译是移动一个对象，而背景位置是一个对象属性，所以看起来需要 2 个 div。这意味着#animatedBkg1 和#animatedBkg2。

于 2012-06-05T05:27:44.980 回答