滚动时如何弹跳动画？

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必须是relative、absolute或fixed (更多的这里)。

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

这是一个工作的小提琴。

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

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

小提琴