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

Каждый знает, как подойти к этому? ТИА.

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/