CSS-анимация для адаптивного блока

Я постоянно добавляю на сцену новые блоки. Все блоки имеют стиль float:left, поэтому они прилипают друг к другу. Свойство width определяется media, например:

@media screen and (min-width: 0px) {
   .block { width: 100%; }
}

@media screen and (min-width: 300px) {
   .block { width: calc(100% / 2); }
}

@media screen and (min-width: 600px) {
   .block { width: calc(100% / 3); }
}

Ключевой особенностью является то, что блоки покрывают всю ширину окна.

Проблема в том, что мне не нравится, что новые блоки добавляются мгновенно, вытесняя все предыдущие. Я знаю, как анимировать постоянную ширину, но в данном случае я имею дело с переменной шириной (в%), которая зависит от размера окна.

Буду признателен за любой совет!