CSS3动画的属性有哪些？

css3动画：animation
特点：不需要事件触发，调用“关键帧”即可。

关键帧：计算机动画术语， 帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。

制定关键帧
第一种写法：

@keyframes     关键帧名称（自行取）{

		from{	初始状态       }
		to{       结束状态     }
		}

第二种写法：

@keyframes     关键帧名称（自行取）{
			0%{    初始状态  }
			25%{   运行时间到25%的状态  }
			50%{   运行到50%的状态   }		
			75%{    运行到75%的状态  }
			100%{   运行到100%的状态 }

	（里面的数值都是自行分配的！！）

我们先介绍一下animation的属性值有哪些、再来导入关键帧。

animation-timiag-fuction（动画的类型）：
cinear、ease、ease-in、step-starty（没有动画的效果，直接跳到下一帧动画的状态！）
animation-name ：关键帧的名称。
animation-duration： 动画的持续时间。
amimation-timing-function：动画运行的类型（匀速，加速，减速，贝塞尔曲线）
animition-iteration-count：运动的次数。（默认状态下为1次）
属性1：infinite（无限循环）
属性2：reverse（反方向运行）
属性3：alternate（先正常运行再反向运行，持续交替）
属性4：alternate-reverse（先反向运行再正常运行，持续交替）
animation-play-state：
属性1：paused（暂停）
属性2：running（运动）

常用的写法：animation：关键帧名称（空格隔开）动画时间 运行类型 延迟时间… （ 中间的属性不分顺序 ！)

简单的运用一下：

style>
*{ margin: 0; padding: 0;
.box{ width: 400px;
height: 400px;
background: pink;
margin: 0 auto;
position: relative;
}
h2{ width: 100px;
height: 100px;
background: green;
position: absolute;
animation: h2late 5s infinite linear;
}
@keyframes h2late{
0%{ left:0;top: 0; }
25%{ left: 300px;top: 0; }
50%{ left: 300px;top: 300px; }
75%{ left: 0;top: 300px; }
100%{ left: 0;top: 0; }
}

格式：

这样就可以在页面中呈现一个移动的小格子了。