html

<p class="hoge">テスト</p>
<p class="fuga">終了を検知1</p>
<p class="piyo">終了を検知2</p>

JavaScript

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

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

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

scss

.hoge {
  color: black;
  transition: 2s;
  &.is-active {
    color: red;
  }
}

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

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