javascript - 滚动时如何弹跳动画?

原文 标签 javascript html

我有这个.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;}
  }

最佳答案

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

100%     {bottom:30;}


应该是:

100%     { bottom:30px; }




您已经在动画中使用了bottom样式,这很好,但是为了使其起作用,元素的position必须为relativeabsolutefixed(更多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

关于javascript - 滚动时如何弹跳动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40943401/

相关文章:

javascript - Ajax不会调用MVC Controller 方法

javascript - 时区转换时间js

html - 我可以在输入字段上使用:before或:after伪元素吗?

jquery - 如何使用 jQuery 将行附加到表中?

html - css/html适用于本地文件,不适用于jsfiddle或Codepen

javascript - 使用动态坐标在 Canvas 上定位

html - Firefox中的CSS固定定位问题

javascript - 解析错误 : Adjacent JSX elements must be wrapped in an enclosing tag

javascript - Sencha 触摸 2 : Show error messages beneath form fields

javascript - 添加此保存社交共享计数器