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

Zoom/scale animation with CSS/JS

本文关键字：缩放动画 CSS JS 使用更新时间：2023-09-26

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

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

另外，另一件事是，当较大的版本放在中间时，我也希望它能工作，所以感觉就像是从中间扩展的。或从顶部中心。或任何其他角落/位置。

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

只是为了让你开始：

如果在两个"元素"之间转换，则可以先将第一个元素转换为第二个元素的大小和位置，然后淡出第一个元素。

您可以在这把小提琴中看到如何做到这一点。

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