css3動畫與scaleX和scaleY？

Question

在這裏，我想要什麼，我需要調整和移動！在同一時間的對象，現在我有這樣的事情：

element.addClass('scale').animate({ 
    top: pxToMove.top+"px", 
    left: pxToMove.left+"px" 
},1000}); 

和規模類是這樣：

-webkit-transform: scaleX(1.8) scaleY(1.8); 
-o-transform: scaleX(1.8) scaleY(1.8); 
-moz-transform: scaleX(1.8) scaleY(1.8); 
transform: scaleX(1.8) scaleY(1.8); 

所以第一縮放正在發生的事情，然後對象移動時，我怎麼能同時做？

Answer 1

備用自己重新發明輪子並利用已經寫好的圖書館; jQuery transit。你可以CSS3動畫幾乎任何財產！ :-)

它一樣簡單：

element.transition({top: pxToMove.top, left: pxToMove.left, scale:1.8}, 1000); 

當然這也適用，如果你網站上的動畫了很多東西;包括那塊庫只爲一個動畫被過度殺死。但就目前的網站而言，您最有可能多次使用它。

Answer 2

你也可以做一個純CSS解決方案，例如：

CSS：

@keyframes scale-move { 
    0% { transform: translate(0,0) scale(1,1); } 
    100% { transform: translate(500px,250px) scale(5,5); } 
} 

#move { 
    animation: scale-move 10s infinite; 
} 

Fiddle Me This... （不供應商前綴......在FF工作只有ATM）