html

<p class="hoge">テスト</p>
<p class="fuga">アニメーション開始</p>
<p class="piyo">アニメーション終了</p>

JavaScript

const hoge = document.querySelector(".hoge");
const fuga = document.querySelector(".fuga");
const piyo = document.querySelector(".piyo");

hoge.classList.add("is-active");
hoge.addEventListener("animationstart", function () {
  fuga.classList.add("is-active");
});

hoge.addEventListener("animationend", function () {
  piyo.classList.add("is-active");
});

scss

.hoge {
  color: black;
  &.is-active {
    animation: check 2s 1s forwards;
  }
}

.fuga {
  color: black;
  &.is-active {
    color: blue;
  }
}

.piyo {
  color: black;
  &.is-active {
    color: green;
  }
}

@keyframes check {
  0% {
    color: black;
  }
  50% {
    color: yellow;
  }
  100% {
    color: red;
  }
}