滚动时如何弹出动画？

Question

我有这个.png，我想让它在每次检测到滚动动作时反弹一点但是我在javascript和css中表现不佳。我希望你们能帮助我

<div class="arrownav bounce">
  <a href="" class="logo">
    <img src="{{ asset('assets/img/arrow down.png') }}" height="45">
  </a>
</div>

我现在正在使用一张使图像反弹的CSS 这是代码：

  .bounce {
    -webkit-animation:bounce 1s infinite;
    -moz-animation:bounce 1s infinite;
    -o-animation:bounce 1s infinite;
    animation:bounce 1s infinite;

  }

  @-webkit-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }

   @-moz-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }

   @-o-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }

   @keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }