How can I generate marquee using CSS3 in HTML5 - html

Question

My HTML code is
<div class="container1">
<div id="container-table"></div>
<div id="container-tablec"></div>
<div id="container-tableq"></div>
<div id="container-table"></div>
<div id="container-table"></div>
</div>
Now, each of these DIVs generates a widget (similar to the one in stock markets). I want to add all of these in a marquee effect which runs endlessly and there is no gap between the last div and the div of the next loop.
I'm a newbie to web development. I've tried using tag but, there is a gap between the ending of the last div and the beginning of the next loop. Also, MDN suggests that I should not use it as it is an obsolete feature.
I want to give it a look similar to the one in stock markets where the entire loop id endless and runs infinitely.
Can anyone suggest me how I can achieve this using CSS3.
Any help would be appreciated. Thanks in advance.

Answer 1

This will help you
/* Sets up our marquee, and inner content */
.marquee {
overflow: hidden;
position: relative;
padding-left: 100%;
/* Some browsers may require -webkit-animation */
animation: reduce 20s linear infinite;
}
.marquee__inner {
white-space: nowrap;
display: inline-block;
/* Some browsers may require -webkit-animation */
animation: scroll 20s linear infinite;
}
/* Creates two white-to-transparent gradients at the ends of the marquee */
.marquee::before,
.marquee::after {
z-index: 1;
top: 0;
left: 0;
position: absolute;
width: 50px;
height: 100%;
content: "";
display: block;
}
.marquee::after {
left: auto;
right: 0;
transform: rotate(180deg);
}
#keyframes reduce {
to {
padding-left: 0;
}
}
#keyframes scroll {
to {
transform: translateX( -100%);
}
}
<div class="marquee">
<span class="marquee__inner">some text .</span>
</div>
Fiddle Example