// Sass Document

.text {
  // ②-1. 「.is-show」クラスが付与される前
  overflow-y: hidden;
  span {
    display: inline-block;
    transform: translateY(100%);
  }
  &.is-show {
    // ②-1. 「.is-show」クラスが付与された後
    span {
      animation: pop 0.4s ease-out forwards;
      // ②-2. 一文字ずつアニメーションの実行を遅延する
      @for $i from 1 through 6 {
        &:nth-child(#{$i}) {
          $delay: $i * 0.5 + s;
          animation-delay: $delay;
        }
      };
    }
  }
}

@keyframes pop {
  0% {
    transform: translateY(100%);
  }
  90% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}