css3栏+响应式布局：使用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/