css3-动画

CSS3的动画需要遵循@keyframes规则：
规定动画的时长
规定动画的名称

下面这个动画的效果就是一个方块进行一个顺时针正方形循环，然后在逆时针返回的循环效果：

div{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    /*infinite alternate 是用来使动画进行循环的*/
    animation: anim 5s infinite alternate;
    -moz-animation: anim 5s infinite alternate;

}
@-moz-keyframes anim {
    0%{background:red;left: 0px;
        top:0px;}
    25%{background: blue;
        left:200px;
        top:0px;}
    50%{background: darkgoldenrod;
        left:200px;
        top:200px;}
    75%{background: darkblue;
        left:0;top: 200px}
    100%{background: red;
        left:0;
        top:0;}
}