我找到了一个教程，展示了如何制作基于CSS的新闻自动收录器，但它需要输入声明，但是包含了很多列表项（教程中有4个）。
如果我添加另外四个列表项，则自动收报机仍然只会到达第四个，然后返回到第一个（因为CSS中的关键帧）
有没有一种方法可以将CSS动画应用于无限数量的列表项，因为它们会被添加？
HTML
<div id="news-ticker">
<span>Latest News</span>
<ul>
<li><a href="#">Article one</a></li>
<li><a href="#">Article two</a></li>
<li><a href="#">Article three</a></li>
<li><a href="#">Article four</a></li>
</ul>
</div>
CSS
#news-ticker {
overflow: hidden;
height:1em;
position: relative;
padding:3px;
}
span {
float: left;
position: relative;
}
ul {
float: left;
padding-left: 20px;
-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
}
ul:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
li {line-height:1em;margin-bottom:.5em;}
#news_ticker a {
color: #000;
text-decoration: none;
font-size: 13px;
}
@-webkit-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -25px;}
50% {margin-top: -50px;}
75% {margin-top: -75px;}
100% {margin-top: 0;}
}
@-moz-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -25px;}
50% {margin-top: -50px;}
75% {margin-top: -75px;}
100% {margin-top: 0;}
}
@-ms-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -25px;}
50% {margin-top: -50px;}
75% {margin-top: -75px;}
100% {margin-top: 0;}
}
@keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -25px;}
50% {margin-top: -50px;}
75% {margin-top: -75px;}
100% {margin-top: 0;}
}