如何使用动画缩小 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 可能会更容易？有什么帮助吗？

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

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

Answer 1

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

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

这是css：

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

最后，提琴：Demo

Answer 2

要使所有图像和 div 背景同时缩放，您必须为#zoomer-inside 元素使用百分比大小并设置特定的字体大小...

但是不流畅，如果你想要更流畅的效果，我建议你使用jQuery结合一些animation()方法或插件。

小提琴： http://jsfiddle.net/HU46s/1/

代码：

#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 更流畅：

小提琴： http://jsfiddle.net/HU46s/5/

代码： jQuery - 更流畅的解决方案（甚至更少的 CSS）：

 $('#toBeZoomedOut').hover( /* change the animation speed as you want :) */
     function(){
        $(this).animate({ 'zoom': 0.5}, 400); //animation speed 400=0.4s !
     },
     function(){
        $(this).animate({ 'zoom': 1}, 400); //animation speed 400=0.4s !
     }
 );

...你需要的唯一 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;
}