JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<div class="item" id="item1">This is 1111</div>
<div class="item" id="item2">This is 2222</div>
<div class="item" id="item3">This is 3333</div>
<div class="item" id="item4">This is 4444</div>
<div class="item" id="item5">This is 5555</div>

</div>

CSS

.container {max-width:800px;height:400px;margin:auto;border:1px solid #999999;overflow:hidden;position:relative;}

.item {position:absolute;width:500%;}

#item1 {bottom:0;height:100px;background-color:#cccccc;
-webkit-animation: scroll 10s linear infinite;
animation: scroll 10s linear infinite;}

#item2 {bottom:100px;height:80px;background-color:#dedede;}

#item3 {bottom:180px;height:60px;background-color:#cccccc;}

#item4 {bottom:240px;height:40px;background-color:#dedede;}

#item5 {bottom:280px;height:20px;background-color:#cccccc;}

/* Animation */
@-webkit-keyframes scroll {0% {transform: translateX(0px);} 100% {transform: translateX(-800px);}}
@keyframes scroll {0% {transform: translateX(0px);} 100% {transform: translateX(-800px);}}