如何使图像连续弹跳jQuery

Question

我的图片需要＆＃34;反弹＆＃34;在窗口加载时连续上下，如本页顶部的滚动图像：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