@charset "utf-8";

/*** アニメーションする要素の親 ***/
.updown{
  display: flex;
  justify-content: center;
  overflow: hidden;
}
/*** アニメーションを適用する要素 ***/
.updown span {
  transform: translateY(110%); /*デフォルトで下に隠す*/
  display: block; /*ブロック要素に*/
  /*animation: 3.5s updown-anim linear infinite; *//* アニメーション */
}

/*** スクロールで画面に入った場合 ***/
.updown.active span{
  animation: 0.9s updown-anim linear forwards; /*一度だけのアニメーション（終了時点で固定）*/
}

/*** 下から登場するアニメーション ***/
@keyframes updown-anim{
  0%{
    transform: translateY(110%); /*表示範囲外から*/
  }
  100%{
    transform: translateY(0); /*通常の位置へ*/
  }
}

/*** 各span(文字)に遅延時間delayを設定 ***/
.updown span:nth-child(1) {
  animation-delay: 0s;
}
.updown span:nth-child(2) {
  animation-delay: 0.05s;
}
.updown span:nth-child(3) {
  animation-delay: 0.1s;
}
.updown span:nth-child(4) {
  animation-delay: 0.15s;
}
.updown span:nth-child(5) {
  animation-delay: 0.2s;
}
.updown span:nth-child(6) {
  animation-delay: 0.25s;
}
.updown span:nth-child(7) {
  animation-delay: 0.3s;
}
.updown span:nth-child(8) {
  animation-delay: 0.35s;
}
.updown span:nth-child(9) {
  animation-delay: 0.4s;
}
.updown span:nth-child(10) {
  animation-delay: 0.45s;
}
.updown span:nth-child(11) {
  animation-delay: 0,5s;
}
.updown span:nth-child(12) {
  animation-delay: 0.55s;
}
.updown span:nth-child(13) {
  animation-delay: 0.6s;
}
.updown span:nth-child(14) {
  animation-delay: 0.65s;
}
.updown span:nth-child(15) {
  animation-delay: 0.7s;
}
.updown span:nth-child(16) {
  animation-delay: 0.75s;
}