-webkit轉換有兩個背景層？

我有一個div有兩個半透明背景的動畫：-webkit轉換有兩個背景層？

/* 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()工程），但是MUCH更平滑。其實，速度差異如此巨大，我只是不能回到background-image。

除了製作兩個divs: #animatedBkg1和#animatedBkg2還有其他選擇嗎？

問候，

來源

2012-06-05 noober

好，因爲翻譯是移動對象，和背景位置是對象屬性，它看起來像被要求2周的div。這意味着＃animatedBkg1和＃animatedBkg2。

來源

2012-06-05 05:27:44 noober

-webkit轉換有兩個背景層？

回答

相關問題