Question

我有一个带有两个半透明背景的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上加速此代码。所以，我用background-position：

替换了CPU加载程序-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()可用），但 MUCH 更平滑。实际上，速度差异是如此巨大，我无法返回background-image。

除了制作两个divs: #animatedBkg1和#animatedBkg2之外还有其他选择吗？

此致

Answer 1

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

-webkit-transform有两个背景层？

1 个答案: