css3动画animation

.div01 {
    width:200px;
    height:200px;
    background:rebeccapurple;
    color:#fff;
    position:relative;
    /*animation:
     *animation-name: 规定需要绑定到选择器的 keyframe 名称
     *animation-duration:规定完成动画花费 时间s 
     *animation-timing-function：规定动画的速度曲线
     *animation-delay：规定在动画开始之前的延迟，允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画
     *infinite规定动画应该无限次播放，也可直接输数值   
     *animation-direction 属性： alternate动画轮流反向播放,normal正常顺序播放（默认）*/
    animation:ani 5s infinite alternate;
    -webkit-animation:ani 5s infinite alternate;
}
@keyframes ani {
    0% {
        background:red;
        top:0;
        left:0;
    }
    25% {
        background:mistyrose;
        top:0;
        left:200px;
    }
    50% {
        background:yellow;
        top:200px;
        left:200px;
    }
    75% {
        background:brown;
        top:200px;
        left:0;
    }
    100% {
        background:mistyrose;
        top:0;
        left:0;
    }
}