-webkit-transform с двумя фоновыми слоями?

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'); 
} 

Оба файла содержат альфа-канал.

Теперь я хочу ускорить этот код на iPhone. Таким образом, я заменил загрузчик процессора 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() работ), но MUCH более плавный. На самом деле, разница в скорости настолько велика, что я просто не могу вернуться к background-image.

Существуют ли другие варианты, кроме двух следующих divs: #animatedBkg1 и #animatedBkg2?

С уважением,

Answer 1

Ну, так как перевод является перемещением объекта и фонового положения является Свойством объекта, похоже, требуется 2 див. Это означает, что # animatedBkg1 и # animatedBkg2.