css动画效果

效果展示

 

css代码如下

div{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation: anim 5s infinite alternate;
        -webkit-animation: anim 5s infinite alternate;
        }
@keyframes anim {
        0%{background: red;left: 0px;top: 0px}
        25%{background: blue;left: 200px;top: 0px}
        50%{background: #ccffcc;left: 200px;top: 200px;}
        75%{background: #00ffff;left: 0px;top: 200px}
        100%{background: red;left: 0px;top: 0px}
        }
@-webkit-keyframes anim {
        0%{background: red;left: 0px;top: 0px}
        25%{background: blue;left: 200px;top: 0px}
        50%{background: #ccffcc;left: 200px;top: 200px;}
        75%{background: #00ffff;left: 0px;top: 200px}
        100%{background: red;left: 0px;top: 0px}
        }</style>