JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<div class="ticker">
  <div style="overflow: hidden;">
    <span id="ticker-strip">
      <span class="item" style="background-color: rgb(44, 184, 244);">
        Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
      </span>
    <span class="item" style="background-color: rgb(137, 57, 235);">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </span>
    <span class="item" style="background-color: rgb(224, 180, 1);">
Various versions have evolved over the years, sometimes
      </span>
    <span class="item" style="background-color: rgb(44, 184, 244);">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
      </span>
    <span class="item" style="background-color: rgb(224, 180, 1);">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour
      </span>

    </span>
  </div>
</div>

CSS

@keyframes move {
  0% { 
    transform: translate(-10px,0);
  }
  100% { 
    transform: translate(-20px,0);
  }
}

#ticker-strip {
    position: absolute; 
    white-space: nowrap; 
    animation-name: move;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-direction: normal;
}