使用CSS/JS縮放/縮放動畫

Question

我正在嘗試使用純CSS或JS創建一個流暢且平滑的縮放比例動畫。基本上我試圖在這裏複製第一個示例：http://msdn.microsoft.com/en-us/library/windows/desktop/aa511285.aspx（「Windows桌面小工具在簡潔和細節狀態之間使用平滑過渡。」）。

棘手的部分是，我想縮放的元素的內容在小或大時會發生變化（就像來自Windows的示例一樣）。他們應該在動畫中間的某個地方淡出。

此外，另一件事是我也希望它的工作時，放大版本放在中間，所以感覺就像它從中間擴展。或從頂級中心。或任何其他角落/職位。

我不知道該怎麼做，也許有人在這裏做過類似的事情，可以幫忙嗎？

Answer 1

只是爲了讓你開始：

如果兩個「單元」之間的轉換，你可以第一個元素第一轉變爲第二元素的大小和位置，然後淡出的第一要素。

你可以在這個fiddle看到如何做到這一點。

注意：如果第一個元素中的內容在調整大小時不適應，則可以使用transform: scale和transform: translate。