<div class="roll" id="roll">
<ul>
<li>第一个结构</li>
<li>第二个结构</li>
<li>第三个结构</li>
<li>第四个结构</li>
<li>第五个结构</li>
<li>第六个结构</li>
<li>第七个结构</li>
<li>第八个结构</li>
<li>第一个结构</li>
<li>第二个结构</li>
</ul>
</div>
2.然后计算需要滚动多少次，一次多少秒,例子是两个两个滚动，需要5s，所以css3的animation的时间是5s。那么@keyframe需要分成几份呢？因为是停顿，每一个滚动都需要两份，最后一个要跳动所以只有一份，所以需要5 * 2 – 1 = 9份，看代码就晓得了：
/*这里不做兼容性处理*/
.roll ul{
list-style: none;
animation: ani 5s linear infinite; /*动画ani，5s，循环匀速播放*/
}
@keyframes ani{
0%{
margin-top: 0;
}
12.5%{
margin-top: 0;
}
25%{
margin-top: -40px;
}
37.5%{
margin-top: -40px;
}
50%{
margin-top: -80px;
}
62.5%{
margin-top: -80px;
}
75%{
margin-top: -120px;
}
87.5%{
margin-top: -120px;
}
100%{
margin-top: -160px; /*最后是一个，这样可以打断动画*/
}
}
进阶
如果个数不确定，那么就需要动态的计算，用js动态地添加@keyframes ，到时候只要自己可以计算清楚间隔还有移动的距离就好。
1.首先获取<li>的长度length
2.然后计算间隔百分比，因为有停顿所以记得要用秒数×2
3.然后用字符串拼写@keyframes，0~length，包括length，因为多一个，双数和单数分开。
4.把<ul>中的第一个和第二个克隆到<ul>的最后
5.创建一个<style>标签加入到<head>中
6.给<ul>添加动画属性
话不多说上代码：
function addKeyFrame(){
var ulObj = $("#roll ul"), //获取ul对象
length = $("#roll li").length, //获取li数组长度
per = 100 / (length / 2 * 2 ); //计算中间间隔百分比
// 拼接字符串
var keyframes = `
@keyframes ani{`;
for(var i = 0 ; i<=length ; i++ ){
keyframes+=`${i * per}%{
margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px;
}`;
}
keyframes+='}';
var liFirst = $("#roll li:first"), //获取第一个元素
liSec = liFirst.next(); //获取第二个元素
ulObj.append(liFirst.clone()).append(liSec.clone()); //将两个元素插入到ul里面
$("<style>").attr("type","text/css").html(keyframes).appendTo($("head")); //创建style标签把关键帧插入到头部
