SOURCE

<div></div>

div{
    width: 100px;
    height: 100px;
    position: relative;
    /* 规定动画的名称和动画的时间 */
    animation: first 5s;
    background-color: red;
    /* animation-fill-mode:  */
    /* animation-direction属性规定了动画下一周期逆向运行 */
    /* animation-direction: alternate; */
    /* animation-iteration-count属性规定了动画持续的次数 */
    /* animation-iteration-count: infinite; */
    /* animation-delay: 2s; */
    /* animation-duration属性规定了动画持续的间 */
    /* animation-delay 属性固定了动画延迟的时间*/
    /* animation-play-state属性规定了动画是否播放 */
    /* animation-play-state: running; */
    animation-iteration-count: 10;
    animation-direction: alternate;
}
div:hover{
    animation-play-state: paused;
}
@keyframes first{
    0%{
        background-color: red;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: yellow;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: green;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: gray;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: red;
        left: 0px;
        top: 0px;
    }
}