title: Streamlabs Custom CSS Event List - Adding a delay for new entries
body: <p>I want to add a delay to my <strong>Streamlabs Event List</strong>, so that it won't spoil my regular Twitch Alerts. Right now, it will display new alerts immediately as they happen. There is no option for it on the website, so I guess I can only do that with <strong>Custom CSS</strong>.</p>
  
  <p>I basically just want the event list to wait for 30 seconds when I get a new follower, subscriber etc. before it starts showing it on the list.</p>
  
  <p>Here is the CSS File that I'm using. It works perfectly fine, I just have no idea how to delay it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://fonts.googleapis.com/css?family=$font_family");
  
  html, .widget-EventList li &gt; div {
  transform: rotateX($rotate_x) rotateY($rotate_y);
  }
  
  .widget-EventList {
  font-weight: 400;
  font-size: $font_size;
  font-family: "$font_family";
  overflow: hidden;
  color: #444;
  list-style: none;
  padding: 0;
  text-transform: uppercase;
  position: relative;
  background: transparente;
  transform: rotate(180deg);
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 10px;
  }
  
  .widget-EventList, .widget-EventList * {
  box-sizing: border-box;
  }
  
  .widget-EventList li {
  transform: rotate(-180deg);
  line-height: 1.3em;
  overflow: hidden;
  margin-bottom: 0.1em;
  }
  
  .widget-EventList li &gt; div:last-child {
  /*padding: 0 10px;*/
  height: 1.3em;
  overflow: hidden;
  position: relative;
  z-index: 10;
  text-align: right;
  display: inline-block;
  float: right;
  white-space: nowrap;
  }
  
  .widget-EventList .tag {
  float: right;
  margin: 0 0.25em;
  display: inline-block;
  }
  
  .widget-EventList .message {
  float: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 0.25em;
  display: inline-block;
  }
  
  .widget-EventList li:first-child div:last-child {
  background: #DCB154;
  color: $text_color;
  }
  
  .widget-EventList li:nth-child(2) div:last-child {
  color: #EEE;
  }
  
  .widget-EventList li:nth-child(3) div:last-child {
  color: #AAA;
  }
  
  .widget-EventList li &gt; div:last-child {
  animation: grow 0.5s forwards;
  -webkit-animation: grow 0.5s forwards;
  }
  
  .widget-EventList li:nth-child(n+ $max_events ) {
  animation: fadeOut 1.5s forwards;
  -webkit-animation: fadeOut 1.5s forwards;
  }
  
  @keyframes grow {
  0% {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  }
  }
  
  @-webkit-keyframes grow {
  0% {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  }
  }</code></pre>
  </div>
  </div>
  </p>