title: How to have a pure smooth CSS Text Slider?
body: <p>I'm trying to build a pure CSS top bar slider for a webshop which shows the advantages of the shop. I got it working, but when the next slide fades in, the slide (the text) is overlapping the other text for a small amount of time and that doesn't look very smooth. Is there a way to prevent this with pure CSS? The slider is only made for mobile devices (&lt;992px)</p>
  <p>The best would be if the slides could slide-out to the left and get slided-in from the right, but I don't think this is possible with pure CSS.</p>
  <p>How do I prevent the overlapping of text?</p>
  <p>Any help is highly appreciated</p>
  <p>Additional libraries loaded:</p>
  <ul>
  <li>Bootstrap 4</li>
  <li>Font Awesome 6</li>
  </ul>
  <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>.trev-top-bar {
    background-color: #256dff;
    color: #fff;
    font-size: 14px;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .trev-top-bar .trev-top-bar-item:first-child {
    -webkit-animation: top-bar-animation-1 16s ease infinite;
    animation: top-bar-animation-1 16s ease infinite;
  }
  
  .trev-top-bar .trev-top-bar-item:nth-child(2) {
    -webkit-animation: top-bar-animation-2 16s ease infinite;
    animation: top-bar-animation-2 16s ease infinite;
  }
  
  .trev-top-bar .trev-top-bar-item:nth-child(3) {
    -webkit-animation: top-bar-animation-3 16s ease infinite;
    animation: top-bar-animation-3 16s ease infinite;
  }
  
  .trev-top-bar .trev-top-bar-item:nth-child(4) {
    -webkit-animation: top-bar-animation-4 16s ease infinite;
    animation: top-bar-animation-4 16s ease infinite;
  }
  
  .trev-top-bar .trev-top-bar-fa-icon,
  .trev-top-bar .icon {
    color: #fff;
    margin-right: .3rem;
  }
  
  .trev-top-bar .trev-top-bar-fa-icon {
    font-size: 16px;
  }
  
  .trev-top-bar .icon svg {
    width: 16px;
    height: 16px;
  }
  
  @keyframes top-bar-animation-1 {
    0% {
      left: 0;
    }
    12.5% {
      left: 0;
    }
    25% {
      left: 100%;
    }
    37.5% {
      left: 100%;
    }
    50% {
      left: 100%;
    }
    62.5% {
      left: 100%;
    }
    75% {
      left: 100%;
    }
    87.5% {
      left: 100%;
    }
    95% {
      left: 0;
    }
  }
  
  @keyframes top-bar-animation-2 {
    0% {
      left: 100%;
    }
    12.5% {
      left: 100%;
    }
    25% {
      left: 0;
    }
    37.5% {
      left: 0;
    }
    50% {
      left: 100%;
    }
    62.5% {
      left: 100%;
    }
    75% {
      left: 100%;
    }
    87.5% {
      left: 100%;
    }
    100% {
      left: 100%;
    }
  }
  
  @keyframes top-bar-animation-3 {
    0% {
      left: 100%;
    }
    12.5% {
      left: 100%;
    }
    25% {
      left: 100%;
    }
    37.5% {
      left: 100%;
    }
    50% {
      left: 0;
    }
    62.5% {
      left: 0;
    }
    75% {
      left: 100%;
    }
    87.5% {
      left: 100%;
    }
    100% {
      left: 100%;
    }
  }
  
  @keyframes top-bar-animation-4 {
    0% {
      left: 100%;
    }
    12.5% {
      left: 100%;
    }
    25% {
      left: 100%;
    }
    37.5% {
      left: 100%;
    }
    50% {
      left: 100%;
    }
    62.5% {
      left: 100%;
    }
    75% {
      left: 0;
    }
    87.5% {
      left: 0;
    }
    100% {
      left: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="trev-top-bar overflow-hidden" style="height: 56px;"&gt;
    &lt;div class="container-fluid
              "&gt;
      &lt;div class="row position-relative"&gt;
        &lt;div class="col-12 col-md trev-top-bar-item text-center position-absolute"&gt;
          &lt;i class="trev-top-bar-fa-icon fa-solid fa-truck-fast"&gt;&lt;/i&gt; Fast Shipping
        &lt;/div&gt;
  
        &lt;div class="col-12 col-md trev-top-bar-item text-center position-absolute"&gt;
          &lt;i class="trev-top-bar-fa-icon fa-solid fa-arrow-right-arrow-left"&gt;&lt;/i&gt; 100 Days Right of Return
        &lt;/div&gt;
  
        &lt;div class="col-12 col-md trev-top-bar-item text-center position-absolute"&gt;
          &lt;i class="trev-top-bar-fa-icon fa-solid fa-file-invoice-dollar"&gt;&lt;/i&gt; Buy with Invoice
        &lt;/div&gt;
  
        &lt;div class="col-12 col-md trev-top-bar-item text-center position-absolute"&gt;
          &lt;i class="trev-top-bar-fa-icon fa-solid fa-gears"&gt;&lt;/i&gt; Proven Quality
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>