javascript - 如何在滚动时弹起动画？

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;}
  }

Answer 1

我注意到的第一件事是所有@keyframes中缺少的单元，就在这里:

100%     {bottom:30;}

这应该是:

100%     { bottom:30px; }

<小时/>

您在动画中使用了 bottom 样式，这非常好，但为了使其正常工作，元素的 position 需要是 相对、绝对或固定(更多here)。

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

这是一个工作 fiddle .

<小时/>

奖金 更改动画中元素位置的另一种方法是使用 transform 样式，而不是使用 bottom。当您使用transform时，您不需要position:relative;。

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(-30px);
  }
}

Fiddle