Question

I have an animation for a div with two semi-transparent backgrounds:

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

Have you noticed the comma? It’s because I use

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

Both files contain alpha channel.

Now, I want to accelerate this code on iPhone. So, I’ve replaced CPU loader background-position with -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);
    }
}

It doesn’t work at all. But if I remove the comma, both bkg layers are moving synchronously (it seems only the first translate() works), but MUCH smoother. Actually, speed difference is so huge I just can’t return to background-image.

Are there other options except making two divs: #animatedBkg1 and #animatedBkg2?

Regards,

Answer 1

Well, since translating is moving an object, and background-position is an object property, it looks like 2 divs are required. This means #animatedBkg1 and #animatedBkg2.