'Make a group of element move horizontally to the left

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>

enter image description here

Animated like this (animated GIF):

enter image description here

htmlcss


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chakib Salah

Related Questions