title: Streamlabs custom CSS twitch chat animate name and message seperatly
body: <p>I want to customise my twitch chat overlay from Streamlabs so that the username of the person animates from the left while the actual message they send animates from the right. Below I have pasted the CSS which is all I need as Stream-labs does the rest. The main bit which controls the animation of the text starts on the 19th line with <code>#log&gt;div{</code> 
  Also, sorry for the long code but you need it all.</p>
  
  <pre><code>h@import url(https://fonts.googleapis.com/css?family=Roboto:700);
  * {
      box-sizing: border-box;
  }
  
  html, body {
      height: 100%;
      overflow: hidden;
  }
  
  body {
      text-shadow: 0 0 1px #000, 0 0 2px #000;
      background: $background_color;
      font-family: 'Roboto';
      font-weight: 700;
      font-size: $font_size;
      line-height: 1.5em;
      color: $text_color;
  }
  
  #log&gt;div {
      animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
  -webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
  }
  
  .colon {
      display: none;
  }
  
  #log {
      display: table;
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 0 10px 10px;
      width: 100%;
      table-layout: fixed;
  }
  
  #log&gt;div {
      display: table-row;
  }
  
  #log&gt;div.deleted {
      visibility: hidden;
  }
  
  #log .emote {
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      padding: 0.4em 0.2em;
      position: relative;
  }
  
  #log .emote img {
      display: inline-block;
      height: 1em;
      opacity: 0;
  }
  
  #log .message,#log .meta {
      vertical-align: top;
      display: table-cell;
      padding-bottom: 0.1em;
  }
  
  #log .meta {
      width: 35%;
      text-align: right;
      padding-right: 0.5em;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }
  
  #log .message {
      word-wrap: break-word;
      width: 65%;
  }
  
  .badge {
      display: inline-block;
      margin-right: 0.2em;
      position: relative;
      height: 1em;
      vertical-align: middle;
      top: -0.1em;
  }
  
  .name {
      margin-left: 0.2em;
  }
  </code></pre>