CSS3动画属性

1.描述

在CSS3中，有一个属性可以用来做一些简单的动画效果，这就是animation。
animation属性可以像flash制作动画一样，通过关键帧控制动画的每一步，实现更为复杂的动画效果。
方法是：1、利用@keyframes声明一个关键帧组。
2、在animation属性中调用上述声明的的关键帧组，来实现动画
制定关键帧：
@keyframes 关键帧的名称{
/制定关键帧/
/from{}
to{}/
0%{
//开始状态
}
25%{
}
50%{
}
…
100%{
//结束状态
}
}
注：1、关键帧的名称可以随便起
2、中间的百分比可以任意写n个，也可以只有0%和100%

animation: 复合属性
animation-name 关键帧的名称
animation-duration 动画的持续的时间
animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）
animation-delay 动画的延迟
animation-iteration-count 动画运动的次数（默认情况下运动1次） infinite(无限循环)
animation-direction 运动的方向
属性值：
- reverse：反方向运行 （ 让关键帧从后往前执行 ）
- alternate：动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state
属性值：
paused暂停
running运动

常用的写法：
简写形式：
    animation:关键帧的名称  动画运动的时间  linear(匀速)  动画延迟的时间   动画运动的次数

完整代码如下：

CSS样式：
{
margin:0;
padding:0;
}
.box{
width:800px;
height:500px;
background:orange;
margin:50px auto;
position:relative;
}
h2{
width:100px;
height:100px;
background:blue;
position:absolute;
left:0;top:0;
/ 用animation 调用关键帧 /
animation:h2Move 3s infinite;
}
/ 制定关键帧 */
@keyframes h2Move{
0%{
left:0;top:0;
}
25%{
left:700px;top:0;
}
50%{
left:700px;top:400px;
}
75%{
left:0;top:400px;
}
100%{
left:0;top:0;
}
}
body里的代码：