Streamlabs OBS Text Fade Timing in CSS

I am a very amateur coder but can normally figure things out - for a few hours I've been stuck on the last piece:

In streamlabs OBS I have designed a custom animation but am struggling to have the subscriber text fade out with the animation - is it possible in our CSS to have the subscriber text fade (ideal?) or simply disappear (workable) after a two second duration?

I've tried for awhile and I know there is an easy solution that I can't figure out - any help would be greatly appreciated!!

Here is our CSS

***
@font-face {
    font-family: 'brooklyn_extraboldregular';
    src: url(removed for brevity on this post)
         url(removed for brevity on this post)
    font-style: normal;

}



h7 {
  font-family: 'brooklyn_extraboldregular' !important;
  line-height: 2.5;
}

h8 {
  font-family: 'brooklyn_extraboldregular' !important;
  letter-spacing: 4px;
}

.widget-AlertBox {
    position: relative;
}
body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#wrap {
    position: relative;
    height: 100%;
    width: 100%;
}
#alert-box {
    height: 100%;
    width: 100%;
    position: absolute;
}
#alert-box.hidden,
.hidden {
    opacity: 0;
}
#alert-text {
    padding: 0px;
}
#alert-message,
#alert-user-message {
    text-align: center;
}


#alert-user-message img {
    vertical-align: middle;
    height: 1em;
}
#alert-image {
    position: relative;
}
#alert-image video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#alert-message > span > span {
    display: inline-block;
  color: blue;
  font-size: 18.3875px;
}
#alert-image {
    z-index: 6;
    position: relative;
}
#alert-text {
    z-index: 6;
    position: relative;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 1520px;
  padding-bottom: 700px;
  padding-top: 297px;
}
#alert-text-wrap {
    z-index: 6;
    position: relative;

}


#bocce {
  color: blue;
  font-size: 18.3875px;
}



#balls {
  color: red;
  font-size: 14.71px;
}

#wack {
  color: green;
  font-size: 39px;
}***

And HTML

<!-- alert image -->
<div id="alert-image-wrap">
  <div id="alert-image">{img}</div>
</div>

<!-- main alert box window -->
<div id="alert-text-wrap">

  <!-- alert text -->
  <div id="alert-text">

    <!-- alert message -->
    <!-- messageTemplate will be replaced with your message template -->
    <!-- for example : {name} is now following! or {name} donated {amount} -->

    <div id="alert-message"><h7 id="bocce">{name}</h7><br/><h8 id="balls">{amount} sub</h8></div>
    <div id="alert-user-message"><h9 id="wack">{userMessage}</h9></div>

  </div>

</div>

Read more here: https://stackoverflow.com/questions/66280535/streamlabs-obs-text-fade-timing-in-css