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/