Card animation in which they all back to center after focus

by ShaCP

HTML

<div id="card-container">
  C
  <div class="card card-one" tabindex="-1" id="one">
    <div class="inner-card">
      <img class="top-card-image" src="http://localhost:3000/diamond.svg" />
      <img class="top-bottom-image" src="http://localhost:3000/diamond.svg" />
      <span>Pai Gow</span>
    </div>
  </div>
  <div class="card card-two" tabindex="-1">
    <div class="inner-card">
      <img class="top-card-image" src="http://localhost:3000/club.svg" />
      <img class="top-bottom-image" src="http://localhost:3000/club.svg" />
      <span>Pai Gow Poker</span>
    </div>
  </div>
  <div class="card card-three" tabindex="-1">
    <div class="inner-card">
      <img class="top-card-image" src="http://localhost:3000/heart.svg" />
      <img class="top-bottom-image" src="http://localhost:3000/heart.svg" />
      <span>Three Card Poker</span>
    </div>
  </div>
  <div class="card card-four" tabindex="-1">
    <div class="inner-card">
      <img class="top-card-image" src="http://localhost:3000/spade.svg" />
      <img class="top-bottom-image" src="http://localhost:3000/spade.svg" />
      <span>Craps</span>
    </div>
  </div>
  <div class="card card-five" tabindex="-1">
    <div div class="inner-card"> <img class="top-card-image" src="http://localhost:3000/club.svg" />
      <img class="top-bottom-image" src="http://localhost:3000/club.svg" />
      <span>Blackjack</span>
    </div>
  </div>
  <div class="card card-six" tabindex="-1">
    <div div class="inner-card">
      <img class="top-card-image" src="http://localhost:3000/diamond.svg" />
      <img class="top-bottom-image" src="http://localhost:3000/diamond.svg" />
      <span>Slots</span>
    </div>
  </div>
  <div class="card card-seven" tabindex="-1">
    <div div class="inner-card">
      <img class="top-card-image" src="http://localhost:3000/heart.svg" />
      <img class="top-bottom-image" src="http://localhost:3000/heart.svg" />
      <!-- <span>7</span> -->
      <span>Poker</span>
    </div>
 ...

CSS

html,
body {
  height: 100vh;
}

body {
  display: flex;
  font-size: 3rem;
  justify-content: center;
  margin: 0;
  overflow-x: hidden;
}

.card-one {
  background-color: green;
  /* transform: rotateZ(-90deg); */
  animation-name: card-one-initial-anim;
}

.card-two {
  background-color: red;
  /* transform: rotateZ(-60deg); */
  animation-name: card-two-initial-anim;
}

.card-three {
  background-color: blue;
  /* transform: rotateZ(-30deg); */
  animation-name: card-three-initial-anim;
}

.card-four {
  background-color: yellow;
  /* transform: rotateZ(30deg); */
  animation-name: card-four-initial-anim;
}

.card-five {
  background-color: lightpink;
  /* transform: rotateZ(30deg); */
  animation-name: card-five-initial-anim;
}

.card-six {
  background-color: lightgreen;
  /* transform: rotateZ(60deg); */
  animation-name: card-six-initial-anim;
}

.card-seven {
  background-color: violet;
  /* transform: rotateZ(90deg); */
  animation-name: card-seven-initial-anim;
}

.card.anim-off {
  animation-name: unset;
}

#card-container {
  /* you can also add a container for
  each card, give it the width given
  here and then make the height: 100% * 1.33*/
  /* --cardWidth: calc(14.2857vw - 2vw); */
  top: 5%;
  --firstCardTranslateXValuePostFirstAnimation: -33%;
  --cardWidth: calc(100vw / 3 - 2vw);
  width: var(--cardWidth);
  /* height: var() */
  height: calc(var(--cardWidth) * 1.4);
  /* margin-bottom: 15%;*/
  /* margin-top: 15%; */
  /* align-self: flex-end; */
  position: relative;
  background-color: lightskyblue;
  /* transform: rotateZ(90deg); */
  /* perspective: 200px; */
  /* transform: rotate3d(1, 1, 1, 45deg); */
  /* transform-style: preserve-3d; */
}

/* increase the radius size to match parent size*/


.card {
  background-color: unset;
}

.card {
  position: absolute;
  transform-origin: bottom;
  width: 100%;
  height: 100%;
  /* justify-content: center; */
  /* align-items: center; */
  animation-fill-mode: forwards;
  animation-duration:...

JavaScript

const cards = [...document.getElementsByClassName("card")];

cards.forEach((card) => {
  function removeAnimation() {
    card.classList.add("anim-off");
  }
  card.addEventListener("animationend", removeAnimation);
  setTimeout(() => card.classList.add("allowOnFocusAnimation"), 1650);
});