How to create bouncing div animation

Question

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

Answer 1

You can use pure css to solve it.

.image {
      margin-top: 50px;
      width: 50px;
      height: 50px;
      background-color: gold;
      border: 1px solid #999;
      animation: bounce 5s infinite alternate;
      -webkit-animation: bounce 5s infinite alternate;
    }
    @keyframes bounce {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }
    @-webkit-keyframes image {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }