Make a group of element move horizontally to the left - html

Question

In the following code, I have arranged a few divs to align horizontally. I want to create 3 rows and in each row, I want divs to move horizontally to the left at varying speeds.
Check this giphy for visual reference : http://www.giphy.com/gifs/ME8Av6LT9hgymDnqSP
.roundeddivs {
background: white;
white-space: nowrap;
padding: 20px 25px;
border-radius: 44px;
max-height: "1px";
width: auto;
margin: 8px;
font-size: 18px;
font-weight: 500;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.block {
padding: 6rem 2rem;
}
.arrangeflex {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin: 0 25px;
}
<section>
<div class="block ">
<div class="arrangeflex">
<span class="roundeddivs">Hello 1</span>
<span class="roundeddivs">Hello 2</span>
<span class="roundeddivs">Hello 3</span>
<span class="roundeddivs">Hello 4</span>
<span class="roundeddivs">Hello 5</span>
<span class="roundeddivs">Hello 6</span>
<span class="roundeddivs">Hello 7</span>
<span class="roundeddivs">Hello 8</span>
<span class="roundeddivs">Hello 9</span>
<span class="roundeddivs">Hello 10</span>
<span class="roundeddivs">Hello 11</span>
<span class="roundeddivs">Hello 12</span>
<span class="roundeddivs">Hello 13</span>
<span class="roundeddivs">Hello 14</span>
<span class="roundeddivs">Hello 15</span>
<span class="roundeddivs">Hello 16</span>
<span class="roundeddivs">Hello 17</span>
</div>
</section>
Animated like this (animated GIF):

Answer 1

If you can add copies of the elements to your HTML you can do the rest in CSS.
Each row is treated independently and has at least two copies of the items in that row - put in more (doubling up) if you think the items wont stretch across the full width of the containing block on some devices.
A row moves 50% of its total width to the left, then starts again. This means the action looks smooth as the second half of the row is "overwritten by" the first half when it hits the left hand side of its container.
This snippet uses a CSS variable --t to set the timing, and each of the rows can set its own --t.
Just a couple of rows shown in this snippet to give the idea. Add more as required, each within its own parent div. I've put 4 copies of the items in each row - probably overkill, it depends on your content and what devices you are trying to style for.
.roundeddivs {
background: white;
white-space: nowrap;
padding: 20px 25px;
border-radius: 44px;
max-height: "1px";
width: auto;
margin: 8px;
font-size: 18px;
font-weight: 500;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.block {
padding: 6rem 2rem;
width: 50vw;
}
.marquees {
margin: 0 25px;
white-space: nowrap;
overflow: hidden;
}
.marquees>* {
white-space: nowrap;
display: flex;
width: fit-content;
animation: move var(--d) linear infinite;
}
.marquees>*:nth-child(1) {
--d: 9s;
}
.marquees>*:nth-child(2) {
--d: 15s;
}
.marquees>*:nth-child(3) {
--d: 8s;
}
.marquees>*:nth-child(4) {
--d: 15ss;
}
#keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
<section>
<div class="block ">
<div class="marquees">
<div>
<span class="roundeddivs">Hello 1</span>
<span class="roundeddivs">Hello 2</span>
<span class="roundeddivs">Hello 3</span>
<span class="roundeddivs">Hello 4</span>
<span class="roundeddivs">Hello 5</span>
<span class="roundeddivs">Hello 6</span>
<span class="roundeddivs">Hello 7</span>
<span class="roundeddivs">Hello 8</span>
<span class="roundeddivs">Hello 1</span>
<span class="roundeddivs">Hello 2</span>
<span class="roundeddivs">Hello 3</span>
<span class="roundeddivs">Hello 4</span>
<span class="roundeddivs">Hello 5</span>
<span class="roundeddivs">Hello 6</span>
<span class="roundeddivs">Hello 7</span>
<span class="roundeddivs">Hello 8</span>
<span class="roundeddivs">Hello 1</span>
<span class="roundeddivs">Hello 2</span>
<span class="roundeddivs">Hello 3</span>
<span class="roundeddivs">Hello 4</span>
<span class="roundeddivs">Hello 5</span>
<span class="roundeddivs">Hello 6</span>
<span class="roundeddivs">Hello 7</span>
<span class="roundeddivs">Hello 8</span>
<span class="roundeddivs">Hello 1</span>
<span class="roundeddivs">Hello 2</span>
<span class="roundeddivs">Hello 3</span>
<span class="roundeddivs">Hello 4</span>
<span class="roundeddivs">Hello 5</span>
<span class="roundeddivs">Hello 6</span>
<span class="roundeddivs">Hello 7</span>
<span class="roundeddivs">Hello 8</span>
</div>
<div>
<span class="roundeddivs">Hello 9</span>
<span class="roundeddivs">Hello 10</span>
<span class="roundeddivs">Hello 11</span>
<span class="roundeddivs">Hello 12</span>
<span class="roundeddivs">Hello 13</span>
<span class="roundeddivs">Hello 14</span>
<span class="roundeddivs">Hello 15</span>
<span class="roundeddivs">Hello 16</span>
<span class="roundeddivs">Hello 17</span>
<span class="roundeddivs">Hello 9</span>
<span class="roundeddivs">Hello 10</span>
<span class="roundeddivs">Hello 11</span>
<span class="roundeddivs">Hello 12</span>
<span class="roundeddivs">Hello 13</span>
<span class="roundeddivs">Hello 14</span>
<span class="roundeddivs">Hello 15</span>
<span class="roundeddivs">Hello 16</span>
<span class="roundeddivs">Hello 17</span>
<span class="roundeddivs">Hello 9</span>
<span class="roundeddivs">Hello 10</span>
<span class="roundeddivs">Hello 11</span>
<span class="roundeddivs">Hello 12</span>
<span class="roundeddivs">Hello 13</span>
<span class="roundeddivs">Hello 14</span>
<span class="roundeddivs">Hello 15</span>
<span class="roundeddivs">Hello 16</span>
<span class="roundeddivs">Hello 17</span>
<span class="roundeddivs">Hello 9</span>
<span class="roundeddivs">Hello 10</span>
<span class="roundeddivs">Hello 11</span>
<span class="roundeddivs">Hello 12</span>
<span class="roundeddivs">Hello 13</span>
<span class="roundeddivs">Hello 14</span>
<span class="roundeddivs">Hello 15</span>
<span class="roundeddivs">Hello 16</span>
<span class="roundeddivs">Hello 17</span>
</div>
</div>
</div>
</section>
Obviously you will want to play with the timings to get the effect you need.

Answer 2

The easiest way I can think of is to use a marquee tag , however the element wont show up from the right directly .
.marquee{
width: 100%
}
<section>
<div class="block ">
<div class="arrangeflex">
<marquee scrollamount="6">
<span class="roundeddivs">Hello 1</span>
<span class="roundeddivs">Hello 2</span>
<span class="roundeddivs">Hello 3</span>
<span class="roundeddivs">Hello 4</span>
</marquee>
<marquee scrollamount="5">
<span class="roundeddivs">Hello 5</span>
<span class="roundeddivs">Hello 6</span>
<span class="roundeddivs">Hello 7</span>
<span class="roundeddivs">Hello 8</span>
</marquee>
<marquee scrollamount="10">
<span class="roundeddivs">Hello 9</span>
<span class="roundeddivs">Hello 10</span>
<span class="roundeddivs">Hello 11</span>
<span class="roundeddivs">Hello 12</span>
</marquee>
<marquee scrollamount="8">
<span class="roundeddivs">Hello 13</span>
<span class="roundeddivs">Hello 14</span>
<span class="roundeddivs">Hello 15</span>
<span class="roundeddivs">Hello 16</span>
<span class="roundeddivs">Hello 17</span>
</marquee>
</div>
</div>
</section>