.c-hoverSlot {
  border: #fff 1px solid;
}

.c-hoverSlot>span {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px 8px;
}

.c-hoverSlot>span span {
  position: relative;
  transition: 0.3s;
}

.c-hoverSlot>span span::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  place-self: center;
  inset: 0;
  color: #fff;
  transform: translateY(-250%);
  opacity: 0;
}

.c-hoverSlot:hover>span span {
  animation: text-down 0.3s ease forwards;
}

.c-hoverSlot:hover>span span:nth-child(1)::after {
  animation-delay: 0.1s;
}

.c-hoverSlot:hover>span span:nth-child(2)::after {
  animation-delay: 0.13s;
}

.c-hoverSlot:hover>span span:nth-child(3)::after {
  animation-delay: 0.16s;
}

.c-hoverSlot:hover>span span:nth-child(4)::after {
  animation-delay: 0.19s;
}

.c-hoverSlot:hover>span span:nth-child(5)::after {
  animation-delay: 0.22s;
}

.c-hoverSlot:hover>span span:nth-child(6)::after {
  animation-delay: 0.25s;
}

.c-hoverSlot:hover>span span:nth-child(7)::after {
  animation-delay: 0.28s;
}

.c-hoverSlot:hover>span span:nth-child(8)::after {
  animation-delay: 0.31s;
}

.c-hoverSlot:hover>span span:nth-child(9)::after {
  animation-delay: 0.34s;
}

.c-hoverSlot:hover>span span:nth-child(10)::after {
  animation-delay: 0.37s;
}

.c-hoverSlot:hover>span span:nth-child(11)::after {
  animation-delay: 0.4s;
}

.c-hoverSlot:hover>span span:nth-child(12)::after {
  animation-delay: 0.43s;
}

.c-hoverSlot:hover>span span:nth-child(13)::after {
  animation-delay: 0.46s;
}

.c-hoverSlot:hover>span span:nth-child(14)::after {
  animation-delay: 0.49s;
}

.c-hoverSlot:hover>span span:nth-child(15)::after {
  animation-delay: 0.52s;
}

.c-hoverSlot:hover>span span:nth-child(16)::after {
  animation-delay: 0.55s;
}

.c-hoverSlot:hover>span span:nth-child(17)::after {
  animation-delay: 0.58s;
}

.c-hoverSlot:hover>span span:nth-child(18)::after {
  animation-delay: 0.61s;
}

.c-hoverSlot:hover>span span:nth-child(19)::after {
  animation-delay: 0.64s;
}

.c-hoverSlot:hover>span span:nth-child(20)::after {
  animation-delay: 0.67s;
}

.c-hoverSlot:hover>span span::after {
  animation: deta-down 0.3s ease forwards;
}

@keyframes text-down {
  0% {
    transform: translateY(0);
  }

  100% {
    color: transparent;
    transform: translateY(100%);
  }
}

@keyframes deta-down {
  0% {
    transform: translateY(-250%);
  }

  100% {
    transform: translateY(-100%);
    opacity: 1;
  }
}