如何使連續的圖像反彈的jQuery

Question

我有需要在窗口加載到「反彈」上下不斷，像在本頁面頂部的滾動圖像的圖像：http://www.complex.com/pop-culture/zendaya-interview-2015-cover-story

我不想使用jQuery ui。我需要圖像來完成一個動畫（動畫向下20px），然後在循環中執行下一個（動畫向上20px）。我似乎無法弄清楚1）兩步動畫和2）循環動畫。

Answer 1

嘗試使用CSS這樣的：

@keyframes example { 
    0% {margin-top: 0px;} 
    50% {margin-top: 20px;} 
    100% {margin-top: 0px;} 
} 

div{ 
    display: inline-block; 
    border: 1px solid black; 
    animation-name: example; 
    animation-duration: 2s; 
    animation-iteration-count: infinite; 
} 

見JFiddle