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;}
}