Каждые 5 секунд ячейки с числами перемешиваются случайным образом

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

const cards = document.querySelectorAll('.table-grid__item');

function shuffle() {
  console.log('randomCard')
  cards.forEach(card => {
    let ramdomPos = Math.floor(Math.random() * 8);
    card.style.order = ramdomPos;
  });
}

setInterval(() => shuffle(), 5000)
.table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(81.25px, 130px));
  grid-template-rows: repeat(4, minmax(81.25px, auto));
  align-items: stretch;
  justify-items: stretch;
  background: silver;
  transition: 1s;
}

.table-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #edd3ea;
  box-sizing: border-box;
  color: #ffff80;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  cursor: pointer;
  transition: 1s;
}
<section class="table-grid">
  <div class="table-grid__item">1</div>
  <div class="table-grid__item">2</div>
  <div class="table-grid__item">3</div>
  <div class="table-grid__item">4</div>
  <div class="table-grid__item">5</div>
  <div class="table-grid__item">6</div>
  <div class="table-grid__item">7</div>
  <div class="table-grid__item">8</div>
</section>


Ответы (0 шт):