Is there a better way to have Javascript function wait until transition is finished than just settin-CodePudding

I'm using Javascript to style a <span> tag (that is already styled in CSS to be cyan) to turn green when it is clicked, and then right back to cyan. In the CSS, its transition-duration property is set to 100ms. I don't want Javascript to set the color back to cyan before it's finished changing to green, so naturally, I use a setTimeout() to delay it the amount of time that the transition will take (100ms), as you can see in the code below, and I improved it a little after looking at other questions regarding this, but they still didn't seem to be the most efficient.

document.getElementById("text").addEventListener("click", function() {
  document.getElementById("text").style.color = "Green";
  setTimeout(function() {
    document.getElementById("text").style.color = "Cyan";
  }, 100); // Timeout time same as transition-duration.
});

#info-display {
  user-select: none;
  text-align: center;
  font: small-caps bold 1.6vw 'Courier New', Courier, monospace;
}

#text {
  color: Cyan;
  background-color: Black;
  padding: 0.1vw 1vw 0.1vw;
  border-radius: 25% 25% 15% 15%;
  transition-duration: 100ms;
}

<h1 id="info-display"><span id="text">~ Words to Click. ~</span></h1>

I need to know if there is a better way than this; some way that Javascript can detect when a CSS transition has finished, so that the tedious work of changing the transition time in two places does not have to happen.
If anybody can help me find a way, it would be fantastic!