以CSS製作無限循環動畫,CSS碼如下:


.jumpporing {
  width: 100px;
  height: 100px;
  position: relative;
  -webkit-animation-name: jumpporing;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 3;
  /* Safari 4.0 - 8.0 */
  animation-name: jumpporing;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes jumpporing {
  0% {
    top: 0px;
  }
  50% {
    top: 30px;
  }
  100% {
    top: 0px;
  }
}

/* Standard syntax */
@keyframes jumpporing {
  0% {
    top: 0px;
  }
  50% {
    top: 30px;
  }
  100% {
    top: 0px;
  }
}