// 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);
  }
}