方法一：css實現（animation）

   animation:move 5s infinite;

   @keyframes move{

   from {top:0px;}

   to {top:200px;}

   }

方法二：js實現

window.requestAnimationFrame() 方法告訴瀏覽器你希望執行動畫並請求瀏覽器在下一次重繪之前呼叫指定的函式來更新動畫。該方法使用一個回撥函式作為引數，這個回撥函式會在瀏覽器重繪之前呼叫。

若您想要在下次重繪時產生另一個動畫畫面，您的回撥例程必須呼叫 requestAnimationFrame()。

當你需要更新螢幕畫面時就可以呼叫此方法。在瀏覽器下次重繪前執行回撥函式。回撥的次數通常是每秒60次，但大多數瀏覽器通常匹配 W3C 所建議的重新整理頻率。在大多數瀏覽器裡，當執行在後臺標籤頁或者隱藏的

回撥函式會被傳入一個引數，DOMHighResTimeStamp，指示當前被 requestAnimationFrame() 排序的回撥函式被觸發的時間。即使每個回撥函式的工作量的計算都花了時間，單個幀中的多個回撥也都將被傳入相同的時間戳。該時間戳是一個十進位制數，單位毫秒，最小精度為1ms(1000μs)。

語法：

window.requestAnimationFrame(callback);

引數：callback一個指定函式的引數，該函式在下次重新繪製動畫時呼叫。這個回撥函式只有一個傳參，

返回值：一個 long 整數，請求 ID ，是回撥列表中唯一的標識。是個非零值，沒別的意義。你可以傳這個值給 window.cancelAnimationFrame() 以取消回撥函式。

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);