How to create bouncing div animation

animation, css, javascript, jquery

Solution

PURE CSS way to do this bounce

Do like this.

.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>

Problem

I'm trying to re-create the bouncing arrow animation like on: http://www.codecomputerlove.com/ but it's not going well... The closest I've got with trying to use the built in animations in Layerslider is available here: dev.themarketcreative dot com I've decided that trying to figure this out with Layerslider is taking to long, does anyone know how to do this? The furthest I discovered is this: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149 but I need it do do this animation onload and on a continuous loop. Thanks

Original source