CONTACT
戻る
#0202003 タップでプレビュー 
    <button class="c-hoverSlot">
      <span>
        <span data-text="H">H</span>
        <span data-text="o">o</span>
        <span data-text="v">v</span>
        <span data-text="e">e</span>
        <span data-text="r">r</span>
        <span data-text="">　</span>
        <span data-text="M">M</span>
        <span data-text="o">o</span>
        <span data-text="v">v</span>
        <span data-text="e">e</span>
      </span>
    </button>
.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;
  }
}
.c {
  &-hoverSlot {
    border: #fff 1px solid;

    > span {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 4px 8px;
      span {
        position: relative;
        transition: 0.3s;

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

    &:hover {
      > span {
        span {
          animation: text-down 0.3s ease forwards;

          @for $i from 1 through 20 {
            &:nth-child(#{$i}) {
              &::after {
                animation-delay: #{0.1s + (0.03s * ($i - 1))};
              }
            }
          }

          &::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;
  }
}
p