如何使用動畫縮小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;
}

最后，一個小提琴： 演示

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;
}