CSS3动画

 

 一、定义

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数，百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成。

 二、创建动画

2.1 用百分比设置动画进度

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

2.2 用from 和 to 表示进度

@keyframes mymove{
 	from{初始状态属性}
	to{结束状态属性}
}

 三、动画属性

我们在用@keyframes 创建动画后，要在元素里面使用animation属性进行设置，属性有：

animation-name：指定动画的名字；

animation-duration：指定动画时间，从开始到结束花费的时间；

animation-timing-function：指定动画的运动曲线；

animation-delay：指定动画延迟时间，设置动画在多少秒之后开始；

animation-iteration-count：指定动画播放的次数，默认为1；

animation-direction：规定动画是否在下一周期逆向地播放，默认是 "normal"；

animation-play-state：规定动画是否正在运行或暂停。默认是 "running"；