css3动画属性

css3提供了两种动画属性：Transition和Animation。

Transition

transition（过渡动画）可以控制html元素的某个属性发生变化时会经历一段时间、以平滑的方式变化。这种效果需要比如鼠标单击、被点击或对元素任何改变中触发。
transition属性值包括：
1.transition-property：设置元素中要参与过渡动画的属性。
2.transition-duration：设置过渡动画要经历的时间。
3.transition-delay：设置延迟时间，即要经过几秒后开始进行过渡动画
4. transition-timing-function：设置过渡动画的速度。这个部分支持以下几个值。
ease:过渡速度逐渐变慢。
linear:匀速过渡。
ease-in：过渡开始速度比较慢，然后速度加快。
ease-out：过渡开始速度比较快，然后速度减慢。
ease-in-out：过渡开始较慢，然后加快速度，达到最大速度后开始减速。
cubic-bezier(x1,y1,x2,y2)：通过贝济埃曲线控制变化的速度，可以代替ease、linear、ease-in、ease-out、ease-in-out等属性值。
简写：transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 过渡速度;

Animation

animation（关键帧动画）同样是随着时间改变html元素的属性值。不同与transition（过渡动画）只能设置第一帧和最后一帧这两个关键帧，animation可以定义任意多的关键帧，从而完成更复杂的动画。animation不需要触发任何事件也可以执行。
animation的属性值包括：
1.animation-name：指定动画名称，该属性指定一个已有的关键帧定义。
2.animation-duration：设置动画持续时间。
3.animation-timing-function：设置动画变化速度
4.animation-delay：动画延迟开始的时间。
5.animation-iteration-count：动画循环执行的次数。这个部分支持以下几个值。
infinite：无限循环
number: 循环的次数
6.animation-direction ：动画运动方向。这个部分支持以下几个值。
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
7.animation-play-state：设置动画的状态，一般配合事件使用。这个部分支持以下几个值。
running:运动
paused: 暂停
简写animation:animation-name animation-duration animation-delay animation-timing-function animation-iteration-count animation-direction ;

关键帧的定义

animati-name的属性值是已有的关键帧定义。关键帧定义格式如下：

@keyframes mymove{
	from{初始状态属性}
	to{结束状态属性}
}
或
@keyframes mymove{
	0%{初始状态属性}
 	...
	50%（中间再可以添加关键帧）
	...
	100%{结束状态属性}
}