<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
<div class="card">D</div>
<div class="card">E</div>
<div class="card">F</div>
<div class="card">G</div>
<div class="card">H</div>
<div class="card">I</div>
<div class="card">J</div>
<div class="card">K</div>
<div class="card">L</div>
<div class="card">M</div>
<div class="card">N</div>
<div class="card">O</div>
<div class="card">P</div>
<div class="card">Q</div>
<div class="card">R</div>
<div class="card">S</div>
<div class="card">T</div>
<div class="card">U</div>
<div class="card">V</div>
<div class="card">W</div>
<div class="card">X</div>
<div class="card">Y</div>
<div class="card">Z</div>

body{
  position: relative;
}
.card{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 1mm solid #444;
  width: 30mm;
  height: 20mm;
  --x: 0;
  --y: 0;
  left: calc( var(--x) * 3.3mm );
  top: calc( var(--y) * 1mm );
  transition: all 0.4s linear;
}

const COLS = 5;
const DY = 22;
const DX = 15;
cards = [ ...document.querySelectorAll( '.card' ) ].map( ( e, i ) => {
  let dy = DY * Math.trunc( i / COLS );
  let dx = DX * ( dy / DY % 2 );
  let x = ( i % COLS ) * 10;
  e.style.setProperty( 'background', '#' + Math.round(( Math.random()*0xffffff )).toString(16).padStart(6,'0') );
  e.style.setProperty( '--y', dy );
  e.style.setProperty( '--x', x );
  const r = { e, x, dx, dy }
  e.onclick = function() {
    cx = r.x;
    cy = r.dy;
    STOP = !STOP;
    r.e.style.setProperty( 'z-index', STOP * 10 );
  }
  return r;
} );


let STOP = false;
let cx = 0;
let cy = 0;

( function f( a ) {
  const ai = a.shift();
  let { e, x, dx, dy } = ai;
  if( STOP ) {
    let px = parseInt( e.style.getPropertyValue( '--x' ) );
    let py = parseInt( e.style.getPropertyValue( '--y' ) );
    e.style.setProperty( '--x', parseInt( ( cx + px ) / 2 ) );
    e.style.setProperty( '--y', parseInt( ( cy + py ) / 2 ) );
  }else{
    ai.x = x = ( dx + x - 1 + COLS * 10 ) % ( COLS * 10 ) - dx;
    e.style.setProperty( '--x', dx + x );
    e.style.setProperty( '--y', dy );
  }
  setTimeout( f, 1, [ ...a, ai ] );
} )( cards );