說明：因為在移動上主要利用CSS來做動畫，所以沒有考慮其他瀏覽器的兼容性，只有-webkit這個前綴，如果需要其他瀏覽器，請自行補齊。
首先解釋一下什么是無縫滾動動畫，
例如下面的例子
See the Pen css實現上下循環滾動效果 by lilyH (@lilyH) on CodePen.
-------------------------------------------------------------------------------
實現原理：
- 首先需要滾動的是每一條數據，而不是數據外面包裹的父元素
- 保證每一條數據循環滾動的時間相同，只是他們之間滾動到可視區域的時間段不同
- 平分滾動的整個時間段，保證每條數據滾動的時間間隔相同
以上三條，看起來就頭疼，也太繞了，下面直接說明例子中的實現方法。
1、html
通過class是wrap的div把可視區域固定在30PX高度內，在此區域中的為可見區域，在此之外的為不可見區域
2、CSS
（1）.content p:nth-child(n) // 這里是為了獲得每一個p數據，例子中具體寫明了1，2。可以用n代替，比如2n表示偶數位置上的子元素 .content p:nth-child(2n)就是表示p元素位於0,2,4位置上的元素
（2）-webkit-animation: anim1 3s linear infinite; //這里注意的是，每一個p元素只有動畫名稱不同，其他的都是相同的，包括動畫的時間，效果，方式等
（3）關鍵的就在於每一個動畫如何在做，如下圖所示
假設圖中0的位置是可視區域，那么滾動的時候，數據需要從2滾動到0再滾動到1位置，只要保證每條數據進入可視區域到離開可視區域的時間相同，那么就能計算出每個數據動畫位置。
另外還需要說明的是，為什么題目中說的是有間隔地，因為實際上數據從位置0移動到位置1以后，下一條數據才從位置2開始移動進入0. 所以如果滾動的是2條，那么第一條從2到1的動畫時間就是0%到50%，第2條數據的動畫時間就是50%到100%，為了保證在動畫能循環出現，所以還需要設置動畫在其他的時間段時是不可見的，並且回到初始的位置。
@-webkit-keyframes anim1{ 0% {top: 30px;opacity: 1} 50% {top: -30px;opacity: 1} 75% {top: -30px ;opacity: 0}/*為了做隱藏**/ 100%{top:30px;opacity: 0}/*讓數據回到原始的位置**/ } @-webkit-keyframes anim2{ 0% {top: -30px;opacity: 0}/**為了做隱藏*/ 25% {top: 30px;opacity: 0}/**讓數據回到原始的位置**/ 50% {top: 30px;opacity: 1} 100%{top: -30px;opacity: 1} } .content p:nth-child(1){background-color: red;} .content p:nth-child(2){background-color: yellow;}
OK，有N條數據，就用100%/N，得到每一條數據的區間，用這種計算方法得到的每條數據的運動區間與間隔區間是同樣的時間。。
當然用這種方法有一個不太好控制的地方在於，當數據條數是除以100不為整數的時候，時間間隔可能不是很准備；比如如果數據是3條，那么得到的每個數據的運動間隔就是100/3 ≈ 33%