javascript - 如何创建弹跳 div 动画

Question

我正在尝试重新创建弹跳箭头动画:http://www.codecomputerlove.com/但进展不顺利...

我尝试在 Layerslider 中使用内置动画的最接近方法可以在这里获得:dev.themarketcreative dot com

我决定用 Layerslider 解决这个问题需要很长时间，有人知道怎么做吗？

我发现的最远的是:http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149但我需要它在加载和连续循环中执行此动画。

谢谢

Answer 1

实现这种弹跳的纯 CSS 方式

这样做。

.bounce {
      position:fixed;
      left:50%;
      bottom:0;
      margin-top:-25px;
      margin-left:-25px;
      height:50px;
      width:50px;
      background:red;
      -webkit-animation:bounce 1s infinite;
    }
    
    @-webkit-keyframes bounce {
      0%       { bottom:5px; }
      25%, 75% { bottom:15px; }
      50%      { bottom:20px; }
      100%     {bottom:0;}
    }

<div class="bounce"></div>