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