Change the table position to left 0 while its overflow in CSS-CodePudding

I thought each table row will move continuously move left to right but its overflowing :( I wanted when "T10" reach the end of the window it come on left :0 and start going to end, and when "T9" reach the end of window it come on left : 0 and start to end of window.... and so on....

td {
  height :6vh;
  width:20vw;
  background-color: red;
  animation: flow 1s infinite;
}

@keyframes flow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100vw);
  }
}

<table>
<tr>
  <td > </td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
  <td ></td>
</tr>
</table>

CodePudding user response：

I'm not sure if I understood exactly what you want. But I've added two variants of a ticker that do per-item animation. If you want to build more complex animations I'd recommend using something like https://greensock.com/gsap/. With JS you have so much more control over the timing - which is a pain when doing keyframes in CSS it is quite limited.

.scroll-wrapper {
  overflow: hidden;
  background: #eee;
  max-width: 100%;
  height: 30px;
  display: flex;
  position: relative;
}

.scroll-item {
  position: absolute;
  top: 0;
  left: -25%;
  height: 100%;
  width: 25%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  animation-name: ticker;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-direction: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scroll-item-alt {
  animation-name: ticker-alt;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-direction: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.T1 {
  animation-delay: 3000ms;
  background-color: yellow;
}

.T2 {
  animation-delay: 2000ms;
  background-color: orange;
}

.T3 {
  animation-delay: 1000ms;
  background-color: red;
}

.T4 {
  background-color: magenta;
}

.T1-alt {
  animation-delay: 2400ms;
}

.T2-alt {
  animation-delay: 1600ms;
}

.T3-alt {
  animation-delay: 800ms;
}

.T4-alt {
  animation-delay: 0ms;
}

@keyframes ticker {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(400%, 0, 0);
  }
}

@keyframes ticker-alt {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(500%, 0, 0);
  }
}

<div >
  <span >T1</span>
  <span >T2</span>
  <span >T3</span>
  <span >T4</span>
</div>

<div >
  <span >T1</span>
  <span >T2</span>
  <span >T3</span>
  <span >T4</span>
</div>