ローディングアニメーション終了を感知して次のアニメーションを開始したい

Question

メインビジュアルの文字をCSSアニメーションで動かしています。
ですがページローディングアニメーション中にメインビジュアルのアニメーションが動いてしまいます。
ローディングアニメーションが終わったことを感知してメインビジュアルのアニメーションを始めたいです。
コードの書き方がよく分からないのでアドバイスがありましたらよろしくお願いいたします。

参考URL

<!-- ローディング画面 -->
  <div id="loading" class="loading active">
    <div class="spinner">
      <span>Loading...</span>
    </div>
  </div>

<!-- メインビジュアル -->
    <div class="mv">
      <div id="fly-in">
        <div><span>Welcome to</span>My portfolio</div>
        <div><span>My name is</span>Kazuki Matsuda</div>
        <div><span>I am a</span> Web engineer</div>
        <div><span>I would be happy</span>if I could help you</div>
      </div>
      <div class="scroll">
      </div>
    </div>

// ローディング画面を消す
window.addEventListener('load', function () {
    document.getElementById('loading').classList.remove('active');
})

// /* ========= ローディング画面 ========= */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  transition: all 1s ease;
  color: #ffffff;
  background-color: #333;
  visibility: hidden;

  &.active {
    opacity: 1;
    visibility: visible;
  }
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent;
  animation: spinner1 1.8s infinite linear forwards reverse;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    opacity: 0.6;
  }

  &::before {
    transform-origin: right bottom;
    border-right: 1px solid;
    z-index: 1;
    animation: spinner2 .4s infinite linear forwards;
  }

  &::after {
    transform-origin: calc(100% - 2px) bottom;
    border-right: 4px solid;
    z-index: 2;
    animation: spinner3 1.5s infinite linear forwards;
  }

  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    z-index: 3;
    animation: spinner_loading_text 1.8s infinite linear forwards;
  }
}

/* Spinner animation */
@keyframes spinner1 {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spinner2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner3 {
  0% {
    transform: translateX(2px) translateZ(0) rotate(0deg);
  }

  100% {
    transform: translateX(2px) translateZ(0) rotate(360deg);
  }
}

@keyframes spinner_loading_text {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ========= mv ========= */
.mv {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: url(../img/mv.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 55%;
  background-attachment: fixed;
  color: #fff;
  text-align: right;
  font-weight: bold;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;

  #fly-in {
    font-size: 6.7rem;
    font-style: italic;
    margin: 50vh auto 30vh;
    height: 20vh;
    text-transform: uppercase;
    user-select: none;


    span {
      display: block;
      font-size: 2.8rem;
      opacity: .8;
    }

    div {
      position: absolute;
      opacity: 0;
      right: 10vw;
      width: 90vw;
      animation: switch 18.8s linear infinite;

      &:nth-child(2) {
        animation-delay: 4.7s;
      }

      &:nth-child(3) {
        animation-delay: 9.4s;
      }

      &:nth-child(4) {
        animation-delay: 14.1s;
      }

    }

    @keyframes switch {
      0% {
        opacity: 0;
        filter: blur(20px);
        transform: scale(50)
      }

      8% {
        opacity: 0;
        filter: blur(17px);
        transform: scale(25)
      }

      12% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1)
      }

      25% {
        opacity: 1;
        filter: blur(0);
        transform: scale(.9)
      }

      28% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(.1)
      }

      80% {
        opacity: 0
      }

      100% {
        opacity: 0
      }
    }
  }

  .scroll {
    position: absolute;
    bottom: 20px;
    left: 48.3%;
    transform: translateY(-48.3%);

    &::after {
      content: "";
      opacity: 0.7;
      border-top: 3px solid #fff;
      border-right: 3px solid #fff;
      display: block;
      width: 40px;
      height: 40px;
      transform: rotate(135deg);
    }
  }
}


/* ========= about ========= */
.about {
  color: $maincolor;
  background-color: #fff;

  .container {
    margin-bottom: 35px;
  }

  &-box {
    width: 100%;
    padding: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 4px solid #666;
    border-radius: 30px;
    box-shadow: 10px 10px 10px $maincolor;

    &-left {
      margin: 0 auto;
      width: 330px;
      height: 330px;
    }

    &-right {
      font-size: 1.8rem;

      p {
        padding-bottom: 30px;

        &:last-child {
          padding-bottom: 0;
        }
      }
    }
  }
}

Answer 1

load時にローディング画面を消していますが、その直後に #fly-in にクラスを追加して、
そのクラスに対してアニメーションを設定すればどうでしょう。

window.addEventListener('load', function () {
    document.getElementById('loading').classList.remove('active');
    document.getElementById('fly-in').classList.add('after-load');
})

#fly-in.after-load div {
    animation: switch 18.8s linear infinite;
}

コード全体を精査していないですがこんな感じのコードでいけるかと。

Comments

[退会済みユーザー]

回答ありがとうございます！
自分のコードの書き方が悪いと思うんですが、うまく動きませんでした...
もう少しいじってみます。