当表在CSS中溢出时，将表的位置更改为左0

Question

我认为每个表行将不断移动从左到右，但它溢出:(我想当"T10"到达窗口的尽头，它从左边开始:0，并开始结束，当"T9"到达窗口的尽头，它出现在左边:0，并开始到窗口的尽头....等等....

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 class="T1"> </td>
<td class="T2"></td>
<td class="T3"></td>
<td class="T4"></td>
<td class="T5"></td>
<td class="T6"></td>
<td class="T7"></td>
<td class="T8"></td>
<td class="T9"></td>
<td class="T10"></td>
</tr>
</table>

Answer 1

我不确定我是否完全理解你想要什么。但是我已经添加了两个不同版本的计时器，它们可以对每个物品进行动画处理。如果你想构建更复杂的动画，我建议使用类似https://greensock.com/gsap/的东西。使用JS，你可以更好地控制时间——在CSS中做关键帧时，这是一件很痛苦的事情，因为它是相当有限的。

.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 class="scroll-wrapper">
<span class="scroll-item T1">T1</span>
<span class="scroll-item T2">T2</span>
<span class="scroll-item T3">T3</span>
<span class="scroll-item T4">T4</span>
</div>
<div class="scroll-wrapper">
<span class="scroll-item scroll-item-alt T1 T1-alt">T1</span>
<span class="scroll-item scroll-item-alt T2 T2-alt">T2</span>
<span class="scroll-item scroll-item-alt T3 T3-alt">T3</span>
<span class="scroll-item scroll-item-alt T4 T4-alt">T4</span>
</div>