画像ぷかぷかバウンド

画像をぷかぷかバウンドさせたい

index.html

      <div class = "ball-wrapper">
          <div class="ball"><img src = "images/image.jpg"></div>
      </div>

style.css

 img {
  margin-left: 10%;
  border-radius: 50%;   /*角丸半径を50%にする(=円形にする)*/ 
  width:  250px;       /* ※縦横を同値に */
  height: 250px;       /* ※縦横を同値に */
  position: absolute;
  -webkit-animation: jump 1s infinite;
  -moz-animation: jump 1s infinite;
  animation: jump 5s infinite;  /* ※落下時間 */
}



/**
 *  animation
 */

@-webkit-keyframes jump {
    0% {
  top: 510px;
  -webkit-animation-timing-function: ease-in;
    }
    40% {}
    50% {
  top: 600px;
  /*height: 120px;*/
  background-color: yellow;
  -webkit-animtion-timing-function: ease-out;
    }
    100% {
  top: 510px;
  -webkit-animation-timing-function: ease-in;
    }
}

@-moz-keyframes jump {
    0% {
  top: 0;
  -moz-animation-timing-function: ease-in;
    }
    40% {}
    50% {
  top: 35px;
  height: 120px;
  -moz-animtion-timing-function: ease-out;
    }
    100% {
  top: 0;
  -moz-animation-timing-function: ease-in;
    }
}

参照：　http://tmlife.net/web/css3/css3-3d-ball-bound.html