<div class="row">name 1</div>
<div class="row">name 2</div>
<div class="row">name 3</div>
<div class="row">name 4</div>

.row{
  background: #eee;
  border: 0.3mm solid #bbb;
  border-radius: 0.3mm;
  margin: 1mm;
  padding: 1mm;
  height: 5mm;
  transition: all 0.3s ease-out;
  transition-delay: calc( 0.3s * var(--num) );
}

.row:nth-child(1) { --num: 1; }
.row:nth-child(2) { --num: 1.2; }
.row:nth-child(3) { --num: 1.3; }
.row:nth-child(4) { --num: 1.4; }


.row.ext{
  height: 15mm;
}

setInterval( () => {
  document.querySelectorAll( '.row' ).forEach(
    r => r.classList.toggle( 'ext' ) )
}, 2000 )