使用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。