css3 让一个圆5s内上下匀速反复移动200px

HTML

<div id="ball"></div>

CSS

	/* 圆球上下来回移动200px，5s内 */
    #ball {
      /* 令元素脱离文档流，不然动不起来 */
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
      border-radius: 50%;
      animation: move 5s infinite alternate;
      /* infinite 无限运动，alternate 到达终点后反向 */
    }
    @keyframes move {
      0% {
        top: 0px;
      }
      100% {
        top: 200px;
      }
    }