<section id="wrapper">
  <div class="block">
    <div class="btn fwari">
      ふわふわ
    </div>
  </div>
  <div class="block">
    <div class="btn spin">
      回転
    </div>
  </div>
  <div class="block">
    <div class="btn jump">
      ジャンプ
    </div>
  </div>
  <div class="block">
    <div class="btn pendulum">
      ふりこ
    </div>
  </div>
  <div class="block">
    <div class="btn ball">
      ボール
    </div>
  </div>
</section>

#wrapper{
  display: block;
  width:100%;
  text-align:center;
  margin:50px auto;
}
.block {
  display: inline-block;
}
.btn {
  margin: 10px;
  padding:0 5px;
  width:100px;
  height:40px;
  background-color:#045FB4;
  border-radius: 20px;
  line-height:40px;
  color:#fff;
}

/****--------- ふわふわ ---------****/
.fwari{
  animation:fwari ease-in-out 1s infinite alternate;
  -webkit-animation:fwari ease-in-out 1s infinite alternate;
  -moz-animation:fwari ease-in-out 1s infinite alternate;
}
@keyframes fwari{
  0%   { transform:translate(0%, 0%); }
  100% { transform:translate(0%, -15px); }
}
@-webkit-keyframes fwari{
  0%   { -webkit-transform:translate(0%, 0%); }
  100% { -webkit-transform:translate(0%, -15px); }
}

@-moz-keyframes fwari{
  0%   { -moz-transform:translate(0%, 0%); }
  100% { -moz-transform:translate(0%, -15px); }
}

/****--------- 回転 ---------****/
.spin{
  animation: spin 5s linear infinite;
  -webkit-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
}
@keyframes spin{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin{
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin{
  0%   { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}

/****--------- ジャンプ ---------****/
.jump{
  animation:jump 4s infinite;
  -webkit-animation:jump 4s infinite;
  -moz-animation:jump 4s infinite;
}
@keyframes jump{
  0%{transform:translate(0,0px);}
  7%{transform:translate(0,-30px);}
  12%{transform:translate(0,0px);}
  16%{transform:translate(0,-9px);}
  22%{transform:translate(0,0px);}
  100%{transform:translate(0,0px);}
}
@-webkit-keyframes jump{
  0%{-webkit-transform:translate(0,0px);}
  7%{-webkit-transform:translate(0,-30px);}
  12%{-webkit-transform:translate(0,0px);}
  16%{-webkit-transform:translate(0,-9px);}
  22%{-webkit-transform:translate(0,0px);}
  100%{-webkit-transform:translate(0,0px);}
}
@-moz-keyframes jump{
  0%{-moz-transform:translate(0,0px);}
  7%{-moz-transform:translate(0,-30px);}
  12%{-moz-transform:translate(0,0px);}
  16%{-moz-transform:translate(0,-9px);}
  22%{-moz-transform:translate(0,0px);}
  100%{-moz-transform:translate(0,0px);}
}

/****--------- ふりこ ---------****/
.pendulum{
  transform-origin:top;
  -webkit-transform-origin:top;
  -moz-transform-origin:top;
  animation:pendulum ease-in-out 1s infinite alternate;
  -webkit-animation:pendulum ease-in-out 1s infinite alternate;
  -moz-animation:pendulum ease-in-out 1s infinite alternate;
 }
@keyframes pendulum{
  0%{transform: rotate(15deg);}
  100%{transform: rotate(-15deg);}
}
@-webkit-keyframes pendulum{
  0%{-webkit-transform: rotate(15deg);}
  100%{-webkit-transform: rotate(-15deg);}
}
@-moz-keyframes pendulum{
  0%{-moz-transform: rotate(15deg);}
  100%{-moz-transform: rotate(-15deg);}
}

/****--------- ボール ---------****/
.ball{
  animation: ball 0.6s alternate infinite;
  -webkit-animation: ball 0.6s alternate infinite;
  -moz-animation: ball 0.6s alternate infinite;
}
@keyframes ball{
  0%   { transform:translate(0%, 0%) rotateX(25deg); }
  100% { transform:translate(0%, -40px); }
}
@-webkit-keyframes ball{
  0%   { -webkit-transform:translate(0%, 0%) rotateX(25deg); }
  100% { -webkit-transform:translate(0%, -40px); }
}

@-moz-keyframes ball{
  0%   { -moz-transform:translate(0%, 0%) rotateX(25deg); }
  100% { -moz-transform:translate(0%, -40px); }
}