使用 CSS/JS 缩放/缩放动画答案

【问题标题】：Zoom/scale animation with CSS/JS使用 CSS/JS 缩放/缩放动画
【发布时间】：2013-09-20 22:52:58
【问题描述】：

我正在尝试使用纯 CSS 或 JS 创建流畅流畅的缩放/缩放动画。基本上我想在这里复制第一个示例：http://msdn.microsoft.com/en-us/library/windows/desktop/aa511285.aspx（“Windows 桌面小工具在其简洁和详细状态之间使用平滑过渡。”）。

棘手的部分是我想要缩放的元素的内容在变小或变大时会发生变化（就像 Windows 中的示例一样）。它们可能应该只是在动画中间的某个地方淡出。

另外，还有一点，我也希望大版放在中间的时候也能正常工作，所以感觉像是从中间展开的。或从顶部中心。或任何其他角落/位置。

我不知道该怎么做，也许这里有人做过类似的事情并可以提供帮助？

【问题讨论】：

您是否尝试过任何可以在此处发布的内容。这可能会让事情变得更容易一些，这样我们就可以向您展示哪里出了问题、需要改进等。有很多方法可以实现您所说的内容。

标签： javascript css css-transitions transition css-transforms

【解决方案1】：

只是为了让你开始：

如果在两个“元素”之间进行过渡，可以先将第一个元素转换为第二个元素的大小和位置，然后淡出第一个元素。

您可以在fiddle 中了解如何做到这一点。

注意：如果第一个元素中的内容在调整大小时不适应，您可以对transform: scale 和transform: translate 执行相同操作。

【讨论】：