div的响应式水平全屏滚动

Question

我正在寻找一个为特定项目添加非JS CSS3动画的解决方案。

这个动画应该自动启动，每10秒滚动(水平(到下一页。

<table style="width:100%">
<tr>
<th>First</th>
<th>Second</th> 
<th>Third</th>
</tr>
<tr>
<td>A</td>
<td>B</td> 
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td> 
<td>F</td>
</tr>
</table>

假设我们有三页内容。对于我的问题，什么是合适的解决方案？

Answer 1

您可以使用margin-left进行滚动。但为此，我认为你可能需要更改你的html。

请参阅下面的代码段：

.page-container{
animation: scroll 8s 2s infinite linear forwards;
width:2000px;
}
.page {
width:650px;
height:200px;
color:white;
font-family:calibri;
text-align:center;
vertical-align:middle;
line-height:60px;
display:inline-block;
}
.one{
background: #3A4662;
}
.two{
background: #00827F;
}
.three{
background: #580137;
}
@-webkit-keyframes scroll {
10% {
margin-left: 0px;
}
35%{
margin-left: -650px;
}
50%{
margin-left: -650px;
}
75%{
margin-left: -1300px;
}
90%{
margin-left: -1300px;
}
95%{
margin-left:0px;
}
100% {
margin-left: 0px;
}
}

<div class="page-container">
<div class="page one">
<div>First</div>
<div>A</div>
<div>D</div>
</div>
<div class="page two">
<div>Second</div> 
<div>B</div> 
<div>E</div> 
</div>
<div class="page three">
<div>Third</div>
<div>C</div>
<div>F</div>
</div>
</div>

你也可以在这里测试