css3列+響應式佈局：動畫項目位置changes.using css3或jquery/javascript

Question

我創建了一個磚石風格的佈局，但與css3的專欄，因爲它允許我更輕鬆地建立佈局和更精確，尤其是因爲我正在構建一個響應式佈局。

現在，我使用css3媒體查詢來根據窗口的大小更改顯示的列數。我想要做的是當列的大小隨着窗口大小的變化而變化時，動態調整列之間列的元素位置的變化。

下面是我的一些CSS代碼：

@media all and (min-width: 961px) and (max-width: 1599px){ 
    #portfolio { 
     width:100%; 
     position:relative; 
     text-align:center; 
     -moz-column-count:4; 
     -moz-column-gap:3px; 
     -webkit-column-count:4; 
     -webkit-column-gap:3px; 
     column-count:4; 
     column-gap:3px; 
    } 
} 
@media all and (min-width: 1600px){ 
    #portfolio { 
     width:100%; 
     position:relative; 
     text-align:center; 
     -moz-column-count:5; 
     -moz-column-gap:3px; 
     -webkit-column-count:5; 
     -webkit-column-gap:3px; 
     column-count:5; 
     column-gap:3px; 
    } 
} 

任何人都知道如何處理呢？ TIA。

Answer 1

見動畫屬性：

/* Animation Property */ 
animation-property: width; 
animation-property: height; 
transition-duration: 1s; 
/* webkit */ 
-webkit-animation-property: width; 
-webkit-animation-property: height; 
-webkit-transition-duration: 1s; 
/* moz */ 
-moz-animation-property: width; 
-moz-animation-property: height; 
-moz-transition-duration: 1s; 
/* opera */ 
-o-animation-property: width; 
-o-animation-property: height; 
-o-transition-duration: 1s; 

例子：http://theboywhocriedfox.com/demo/animate-transitions-with-media-queries/