Javascript 如何使用动画缩小div？

我有一个DIV覆盖了整页（高度和宽度都是100%）。我正在尝试使用CSS（可能还有JavaScript）来创建一个缩小动画效果，使DIV更小（使DIV中的所有东西——它的子对象——也更小）到页面上的某个特定点（页面的中间）和特定的

宽度
和
高度
（例如100*100px）

我从以下代码开始：

<div id="toBeZoomedOut">
  <div>something</div>
  <div><img src="background.jpg"></div>
</div>

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
   -webkit-transition: 1s ease-in-out;
   -moz-transition: 1s ease-in-out;
   transition: 1s ease-in-out;
}

#toBeZoomedOut img {
   height: 250px;
   width: 250px;
}

#toBeZoomedOut:hover {
   zoom: 0.5;
}


某物
#雪橇{
背景色：黑色；
边框：1px实心#AAAAA；
颜色：白色；
宽度：300px；
高度：300px；
左边距：自动；
右边距：自动；
-webkit转换：1s轻松输入输出；
-moz转换：1s易入易出；
转换：1s易入易出；
}
#toBeZoomedOut img{
高度：250px；
宽度：250px；
}
#toBeZoomedOut:悬停{
变焦：0.5；
}

这段代码的问题是，它会缩小组件（父div），并立即缩小其中的内容，然后返回以放大组件

基本上它是一辆小马车。有什么有用的修复方法可以让它把所有的东西都缩小到一起吗？如果我可以将所有内容一起缩小到页面上的特定位置和特定宽度/高度（例如，将所有内容缩小到左侧：100px，顶部：100px，父div应为：100px*100px，其他所有内容的大小都是相对的），那就太好了

我知道使用JavaScript可能会更容易些？有什么帮助吗

最后一个注意事项是，如果您注意到动画并没有真正反映缩放动画。虽然这将是一个额外的优点，但实际的缩放动画将非常棒

简化的jsiddle链接：
要使所有图像和div背景同时缩放，必须使用“缩放内部元素”的百分比大小，并设置特定的字体大小

但是它不是平滑的，如果您想要更平滑的结果，我建议您将jQuery与一些animation（）方法或插件结合使用

小提琴：

代码：

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}
#toBeZoomedOut div, #toBeZoomedOut img {
   width: 90%;
   font-size: 20px;
}
#toBeZoomedOut img {
   height: 90%;
   width: 90%;
}

#toBeZoomedOut:hover {
   zoom: 0.5;
}

jQuery更平滑：
小提琴：

代码：
jQuery-更平滑的解决方案（更少的CSS）：

…使用此CSS，您需要的唯一CSS是：

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
}

#toBeZoomedOut img {
   width: 250px;
}

我正在使用通用选择器将父容器中的所有内容作为目标，以便对其应用css转换

我做的下一件事是将内部内容宽度更改为
%
，以便于缩放

以下是css：

#toBeZoomedOut * {
   -webkit-transition: all 1s ease;
   -moz-transition: 1s ease;
   transition: 1s ease;
}

最后，一个问题：
你想做什么？谢谢你的回复，但不是真的。我试图做的是当我有一个div（即使它有10个不同的子div，在该div中有不同的大小和位置），我尝试缩小父div，相对于它现在的新大小缩小它里面的内容，而不首先放大div。这里有一个div，它的背景在悬停时放大，离开悬停时缩小，这与我的问题不同。我非常感谢你的帮助，谢谢：）哦，你需要他们相对：）好的，谢谢你的澄清..谢谢你的回答！虽然这解决了部分问题（相对缩放所有内容），这很好，但它仍然不平滑（正如您所提到的），而且它看起来不像缩放效果。您认为您可以为jQuery实现提供帮助吗？再次感谢你的回答：）谢谢你的回答！还有几个问题（在上面的问题中提出）：1。我们是否可以将最终结果设置为特定的宽度和高度，而不是缩放：0.5？2.我们是否可以将最终结果（最终缩小框）放在特定位置（平滑地缩小到页面中的特定位置，例如顶部：100px，左侧：100px）？再次感谢您的回答：）太棒了，我还更新了它，以确保它能缩小到页面上的特定位置。这很酷，我会接受这个答案。谢谢！：）没问题，伙计，祝你的设计好运！不建议使用zoom，因为它在大多数浏览器上都不起作用：“非标准此功能是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且将来行为可能会发生变化。”
#toBeZoomedOut * {
   -webkit-transition: all 1s ease;
   -moz-transition: 1s ease;
   transition: 1s ease;
}