css3 动画效果的实现 笔记

①我们要想实现动画的效果，首先需要定义一个动画

key：关键；frame：帧；

动画定义keyframes属性名处于实验阶段需要书写前缀

可以使用from和to 声明动画 

from表示开始帧

to 表示结束帧

1/*定义动画*/
2@-webkit-keyframes donghua {
3	/*开始状态在from*/
4	from {
5		transform: translate(20px,20px);
6		
7	}
8	/*结束状态 to  from 和 to 属性需要一一对应*/
9	to {
10		width: 600px;
11		transform: translate(100px,200px);
12	}
}

② 实现一个动画的第二步就是调用动画了

animation:动画

animation的参数：

第一个参数：所调用动画的名称

第二个参数：动画完成一次的时间，单位是s，不能省略

第三个参数：缓冲描述 linear ease 贝塞尔曲线

第四个参数：延迟时间，单位是s，不可以省略，只针对第一次动画

第五个参数：动画的次数。如果自动补全反方向动画，也算次数。无限次：infinite

第六个参数：自动补全反方向动画 alternate

第七个参数：保存最后一帧的状态 forwards

我们除了使用 from和to 来定义动画之外，我们还可以使用百分比来定义动画，这样定义的动画可以调试的更加平滑。

百分比定义动画：表示在该时间动画达到的状态

0% 表示开始状态

100% 表示结束的状态

/*定义动画*/
@-webkit-keyframes donghua1 {
	0% {
		width: 200px;
		background-color: lightblue;
	}
	20% {
		width: 500px;
		background-color: red;
	}
	60% {
		width: 300px;
		background-color: blue;
	}
	100% {
		width: 700px;
		background-color: green;
	}
}
//每到达一个百分比时间点，这个元素就会变化成你定义的属性值，这里的百分比时间点是相对于你设置的动画完成一次的时间

鼠标进入停止动画播放：

-webkit-animation-play-state：paused；

state:状态；paused：暂停；

设置盒子元素的透明度：opacity：0.5；     opacity属性值0 ~1之间，