javascript - 如何使用动画缩小 div？

Question

我有一个覆盖整个页面的 DIV(高度和宽度均为 100%)。我正在尝试使用 CSS(可能还有 JavaScript)来创建缩小动画效果，以便 DIV 更小(使 div 内的所有内容 - 它的子项 - 也更小)到页面上的特定点(页面中间)以及特定的 width 和 height(例如 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;
}

此代码的问题在于它缩小组件(父 div)并立即缩小其中的内容，然后返回以放大组件。

基本上它是一个小马车。是否有任何有用的修复程序可以将所有内容一起缩小？如果我可以将所有内容一起缩小到页面上的特定位置和特定的宽度/高度(例如，将所有内容缩小到左侧:100px，顶部:100px，父 div 应该是:100px * 100px，那就太好了其他一切都是相对大小)。

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

最后一点，如果您注意到动画并没有真正反射(reflect)缩放动画。虽然这将是一个额外的好处，但实际的缩放动画会很棒。

JSFiddle 链接使其更容易:http://jsfiddle.net/HU46s/

Answer 1

我正在使用通用选择器来定位父容器内的所有内容，以对其应用 css 转换。

接下来我做的是将内部内容宽度更改为 % 以便于缩放。

这是CSS:

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

最后，一个 fiddle :Demo