infinite client logo from right to let and left to right without plugin-CodePudding

I have a client's logo, I have to slide the first-row infinite horizontal from right to left and the second row left to right. I have to show 6 client logos on page load

I am getting two issues.

In the first row, It's after some time it directly jumps to the first.
In the second row, It's not working as smoothly as expected.

I tried the below code. kindly check it once

.client-logo-wrap {
  position: relative;
  overflow: hidden;
  height: 150px;
}

.client-logo {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}

.client-logo-left {
  animation: logomoveleft 10s linear infinite;
}

.client-logo-right {
  animation: logomoveright 10s linear infinite;
}

.client-logo li {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 20px !important;
  height: 100px;
  width: 220px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0px 5px;
}


/*
.second-row{ 
  top: 150px;
}*/

@keyframes logomoveleft {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-30%, 0);
  }
}

@keyframes logomoveright {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(30%, 0);
  }
}

<div class="client-logo-wrap">
  <ul class="client-logo client-logo-left">
    <li><img src="https://via.placeholder.com/150" alt="" />1</li>
    <li><img src="https://via.placeholder.com/150" alt="" />2</li>
    <li><img src="https://via.placeholder.com/150" alt="" />3</li>
    <li><img src="https://via.placeholder.com/150" alt="" />4</li>
    <li><img src="https://via.placeholder.com/150" alt="" />5</li>
    <li><img src="https://via.placeholder.com/150" alt="" />6</li>
    <li><img src="https://via.placeholder.com/150" alt="" />7</li>
    <li><img src="https://via.placeholder.com/150" alt="" />1</li>
    <li><img src="https://via.placeholder.com/150" alt="" />2</li>
    <li><img src="https://via.placeholder.com/150" alt="" />3</li>
    <li><img src="https://via.placeholder.com/150" alt="" />4</li>
    <li><img src="https://via.placeholder.com/150" alt="" />5</li>
    <li><img src="https://via.placeholder.com/150" alt="" />6</li>
    <li><img src="https://via.placeholder.com/150" alt="" />7</li>


  </ul>
</div>
<div class="client-logo-wrap  mt-3">
  <ul class="client-logo second-row client-logo-right">
    <li><img src="https://via.placeholder.com/100" alt="" />1</li>
    <li><img src="https://via.placeholder.com/100" alt="" />2</li>
    <li><img src="https://via.placeholder.com/100" alt="" />3</li>
    <li><img src="https://via.placeholder.com/100" alt="" />4</li>
    <li><img src="https://via.placeholder.com/100" alt="" />5</li>
    <li><img src="https://via.placeholder.com/100" alt="" />6</li>
    <li><img src="https://via.placeholder.com/100" alt="" />7</li>
    <li><img src="https://via.placeholder.com/100" alt="" />1</li>
    <li><img src="https://via.placeholder.com/100" alt="" />2</li>
    <li><img src="https://via.placeholder.com/100" alt="" />3</li>
    <li><img src="https://via.placeholder.com/100" alt="" />4</li>
    <li><img src="https://via.placeholder.com/100" alt="" />5</li>
    <li><img src="https://via.placeholder.com/100" alt="" />6</li>
    <li><img src="https://via.placeholder.com/100" alt="" />7</li>
  </ul>
</div>

CodePudding user response：

To make it infinite without noticing the loop comming back to 0%, you'll need to make something with JS that move a block at the beginning when it's not visible anymore.

To fix the left to right, make the position of your block start at -100% in the X axis.

.client-logo-wrap {
  position: relative;
  overflow: hidden;
  height: 150px;
}

.client-logo {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}

.client-logo-left {
  animation: logomoveleft 10s linear infinite;
}

.client-logo-right {
  transform: translate(-100%, 0);
  animation: logomoveright 10s linear infinite;
}

.client-logo li {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 20px !important;
  height: 100px;
  width: 220px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0px 5px;
}


/*
.second-row{ 
  top: 150px;
}*/

@keyframes logomoveleft {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-30%, 0);
  }
}

@keyframes logomoveright {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

<div class="client-logo-wrap">
  <ul class="client-logo client-logo-left">
    <li><img src="https://via.placeholder.com/150" alt="" />1</li>
    <li><img src="https://via.placeholder.com/150" alt="" />2</li>
    <li><img src="https://via.placeholder.com/150" alt="" />3</li>
    <li><img src="https://via.placeholder.com/150" alt="" />4</li>
    <li><img src="https://via.placeholder.com/150" alt="" />5</li>
    <li><img src="https://via.placeholder.com/150" alt="" />6</li>
    <li><img src="https://via.placeholder.com/150" alt="" />7</li>
    <li><img src="https://via.placeholder.com/150" alt="" />1</li>
    <li><img src="https://via.placeholder.com/150" alt="" />2</li>
    <li><img src="https://via.placeholder.com/150" alt="" />3</li>
    <li><img src="https://via.placeholder.com/150" alt="" />4</li>
    <li><img src="https://via.placeholder.com/150" alt="" />5</li>
    <li><img src="https://via.placeholder.com/150" alt="" />6</li>
    <li><img src="https://via.placeholder.com/150" alt="" />7</li>


  </ul>
</div>
<div class="client-logo-wrap  mt-3">
  <ul class="client-logo second-row client-logo-right">
    <li><img src="https://via.placeholder.com/100" alt="" />1</li>
    <li><img src="https://via.placeholder.com/100" alt="" />2</li>
    <li><img src="https://via.placeholder.com/100" alt="" />3</li>
    <li><img src="https://via.placeholder.com/100" alt="" />4</li>
    <li><img src="https://via.placeholder.com/100" alt="" />5</li>
    <li><img src="https://via.placeholder.com/100" alt="" />6</li>
    <li><img src="https://via.placeholder.com/100" alt="" />7</li>
    <li><img src="https://via.placeholder.com/100" alt="" />1</li>
    <li><img src="https://via.placeholder.com/100" alt="" />2</li>
    <li><img src="https://via.placeholder.com/100" alt="" />3</li>
    <li><img src="https://via.placeholder.com/100" alt="" />4</li>
    <li><img src="https://via.placeholder.com/100" alt="" />5</li>
    <li><img src="https://via.placeholder.com/100" alt="" />6</li>
    <li><img src="https://via.placeholder.com/100" alt="" />7</li>
  </ul>
</div>