Как анимировать изменение column-count в CSS?

Question

[Alexander-K]

Блок разбивается на колонки с помощью css-свойства column-count.
При изменении размера окна браузера число колонок изменяется:

@media only screen and (max-width: 1100px) {
    .wrapper { column-count: 3; }
}

@media only screen and (max-width: 900px) {
    .wrapper { column-count: 2; }
}

@media only screen and (max-width: 700px) {
    .wrapper { column-count: 1; }
}

Как анимировать это изменение числа колонок?
Чтобы они не просто перескакивали, а с анимацией.

Comments

[A K]

а как дизайнер представлил анимацию изменения числа колонок

[Alexander-K]

Symphony я имею ввиду, чтобы блоки при перестройке колонок - не перескакивали, а плавно переезжали из одной в другую

[A K]

Alexander-K: вы должны будете в ручную прописать все движение, а для этого необходимо видеть экшн предусмотренный дизайнером.

Answer 1

[Vanya Semeschuk]

Transition :)

Comments

[Alexander-K]

Vanya Semeschuk, transition не срабатывает для column-count

Answer 2

[Y0Y]

Не думаю, что это свойство подлежит анимации. К тому же, подумайте, стоит ли вообще применять анимацию в данном случае, иногда она бывает излишней.