Animaciones de cuadrícula CSS usando área de cuadrícula

Estoy construyendo un rompecabezas usando CSS grid.

He simplificado el rompecabezas a una sola ficha roja y una ficha en blanco.

Lo que estoy tratando de hacer es que si haces clic en el mosaico rojo, el mosaico rojo se deslizará hacia la posición de los mosaicos en blanco.

Por el momento, puedo cambiar su posición usando un simple controlador de clics de JavaScript que alterna la clase "izquierda" y "derecha" para ambos divs de mosaico. Luego, en mi CSS, he especificado áreas de cuadrícula (izquierda y derecha) para la clase css .lefto .right.

Es un poco difícil de explicar, así que incluyo todo el código a continuación.

Básicamente, espero encontrar alguna forma de hacer la transición de la baldosa roja de grid-area: lefta grid-area: righten un movimiento deslizante.

¡Cualquier ayuda será muy apreciada!

const red = document.querySelector('.red');
const blank = document.querySelector('.blank');
red.addEventListener('click', slide);

function slide() {
  red.classList.toggle('left');
  red.classList.toggle('right');
  blank.classList.toggle('left');
  blank.classList.toggle('right');
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right";
  border: 10px solid black;
  text-align: center;
}

.red {
  background: red;
}

.left {
  grid-area: left;
}

.right {
  grid-area: right;
}

<div class="container">
  <div class="red left">
    <p>RED</p>
  </div>
  <div class="blank right"></div>
</div>