เรียน​ CSS Animation | Day 6 - Card Game

// emmet
.wrapper>h2.title{Card Game Example}+.cards>.card*7

<div class="wrapper">
  <h2 class="title">Card Game Example</h2>
  <div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.cards {
  /*   position: absolute; */
  /*   bottom: 4em; */
  display: flex;
  justify-content: center;
  gap: 8px;
}

.card {
  display: block;
  width: 75px;
  height: 100px;
  border: 1px solid #df93b8;
  cursor: pointer;
  transition: all 0.25s ease-in;
  background-color: #000;
  border-radius: 4px;
  color: #fff;
}

.card:hover {
  transform: translateY(-8px);
}

.card.show {
  animation-name: displayCard;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes displayCard {
  0% {
    transform: translateY(0) scale(1) rotate(0);
  }

  100% {
    transform: translate(-50%, calc(-50vh)) scale(2) rotate(-180deg);
  }
}

const elements = document.querySelectorAll(".card");

elements.forEach((element) => {
  element.addEventListener("click", () => {
    if (element.classList.contains("dismiss")) {
      element.classList.remove("dismiss");
    }

    if (element.classList.contains("show")) {
      element.classList.remove("show");
      element.classList.add("dismiss");
    } else {
      element.classList.add("show");
    }
  });
});

.card.dismiss {
  animation: 0.6s dismissCard 1;
}

.cards:has(.card:hover) .card:not(:hover) {
  filter: grayscale(50%) blur(1px);
  opacity: 0.8;
}