Нечетное поведение при изменении порядка элементов сетки * 1000 с переходом, как это исправить?

Question

Я хочу изменить порядок элементов внутри контейнера сетки, нажав на кнопку. Я просто дал дочернему элементу свойство перехода, и результат был таким странным.

Прежде всего, синхронизация абсолютно неверна между значением времени перехода и фактическим временем, которое требуется для достижения этого, также это происходит на многих этапах в странном и случайном порядке, наконец, и самое главное, есть нет эффекта перехода или что-либо еще.

Вот фрагмент моего кода:

function changeOrder(){
var elmnts = document.querySelectorAll(".container>div");
  elmnts.forEach((item, i) => {
   item.style.order = 5 - i;
  });
}

.container{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-column-gap: 4px;
  grid-row-gap: 24px;
  justify-content: center;
  padding: 25px;
}
.container > div {
  width: 150px;
  height: 150px;
  background: red;
  color: white;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  transition: order 20s;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<button type="button" name="button" onclick="changeOrder()">Change order</button>

Итак, есть ли способ достичь этого, дать ощущение движения, когда элемент перемещается из позиции в другую из-за изменений в его стоимость заказа?