I want an animation similar to the one on the Alibaba.com homepage when you scroll down to the site reach down to the RFQ Request for Quotation Sections right side form area. for reference attached an image to that section in the website.
I tried this Code:
.rfq-scroll-main
{
box-sizing: content-box;
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
display: inline-block;
position: relative;
}
.rfq-list-scroll-wrapper
{
width: 608px;
height: 30px;
margin: 25px 0;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 25px;
margin-left: 0px;
position: relative;
vertical-align: baseline;
display: inline-block;
color: #333;
font-family: 'Roboto', sans-serif;
background: transparent;
}
.rfq-list
{
height: 30px;
overflow: hidden;
display: inline-block;
}
.rfq-list div span
{
padding: -4px 15px 10px 15px;
height: 30px;
margin-bottom: 32px;
display: inline-block;
}
.rfq-list div span:first-child
{
animation: scroll 25s infinite;
}
@keyframes scroll
{
0%
{
transform: translateY(0);
}
6.66667%
{
transform: translateY(0);
}
8.33333%
{
transform: translateY(-18px);
}
15%
{
transform: translateY(-18px);
}
16.6667%
{
transform: translateY(-36px);
}
23.3333%
{
transform: translateY(-36px);
}
25%
{
transform: translateY(-54px);
}
31.6667%
{
transform: translateY(-54px);
}
33.3333%
{
transform: translateY(-72px);
}
40%
{
transform: translateY(-72px);
}
41.6667%
{
transform: translateY(-90px);
}
48.3333%
{
transform: translateY(-90px);
}
50%
{
transform: translateY(-108px);
}
56.6667%
{
transform: translateY(-108px);
}
58.3333%
{
transform: translateY(-126px);
}
65%
{
transform: translateY(-126px);
}
66.6667%
{
transform: translateY(-144px);
}
73.3333%
{
transform: translateY(-144px);
}
75%
{
transform: translateY(-162px);
}
81.6667%
{
transform: translateY(-162px);
}
83.3333%
{
transform: translateY(-180px);
}
90%
{
transform: translateY(-180px);
}
91.6667%
{
transform: translateY(-198px);
}
98.3333%
{
transform: translateY(-198px);
}
100%
{
transform: translateY(-216px);
}
}<div class="rfq-scroll-main">
<div class="rfq-list-scroll-wrapper">
<div class="rfq-list">
<div><span>"item-info-rfq">"Hotel wooden hanger " from <img src="images/kr.gif"> Y***** received 4 quotation(s)</span></div>
<div><span>"item-info-rfq2">"customized t shirts" from <img src="images/uk.gif"> t***** received 6 quotation(s)</span></div>
<div><span>"med bag pack" from <img src="images/ca.gif"> C***** received 4 quotation(s)</span></div>
<div><span>Morbi at dui non turpis suscipit ultricies sit amet non mi.</span></div>
<div><span>dolor sit amet, consectetur adipiscing elit.</span></div>
<div><span>Nam dictum magna quis sem porta euismod.</span></div>
<div><span>Cras scelerisque lacus non venenatis gravida.</span></div>
<div><span>Morbi at dui non turpis suscipit ultricies sit amet non mi.</span></div>
</div>
</div>
</div>This code i did shows both the div's at a time and are not visible the way their animation is
please help