Safari -webkit-transition-property：動畫比例和/或背景大小

Question

我想用背景圖像爲一些div製作動畫。我希望他們在頁面上移動位置並變大。

我通過jQuery來添加一個類，這個類將觸發Webit的CSS3轉換。

我開始用這樣的：

.myStyle { 
    width: 240px; 
    height: 240px; 
    top: 200px; 
    -webkit-background-size: 240px; 
    -webkit-transition-property: top, -webkit-background-size, width, height; 
    -webkit-transition-duration: 1s; 
} 

當並稱風格，DIV改變寬度和高度，移動到新的頂部位置，但背景大小保持不變。

於是我嘗試這樣做：

.myStyle { 
    top: 200px; 
    -webkit-transform: scale(1.5); 
    -webkit-transition-property: top, -webkit-transform; 
    -webkit-transition-duration: 1s; 

} 

但是，同樣的問題。頂級動畫，但不是比例。

我想（希望），這只是我的一個語法錯誤。或者僅僅是不可能轉換-webkit屬性？

Answer 1

第一個代碼不起作用，因爲webkit無法從一個單位維度（％）到另一個（px）進行動畫製作。如果你改變...

.myStyle { 
    -webkit-background-size: 150%; 
} 

它應該動畫，但從0到100％。我想你的第二個例子中也有類似的情況發生。

我會去簡化代碼並在之前進行轉換聲明進行轉換。這允許元素在移除類時反轉過渡。另外，如果你要一致地縮放東西，那麼-webkit-transform：scale就是要走的路。

#div { 
    /*your css*/ 
    -webkit-transition: all 1s ease; 
} 

#div.animated { 
    -webkit-transform: -webkit-transform: scale(1.5); 
}