animation（动画）

介绍

1、动画和过渡类似，都是可以实现一些动态的效果

2、不同的是过渡需要在某个属性发生变化时才会触发

3、动画可以自动触发动态效果

4、设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤

@keyframes identifier（设置关键帧）

@keyframes test{

	from{}
	`to		表示动画开始的位置 也可也使用0%`
	to{}
	`from	表示动画结束的位置 也可也使用100%`
}

---

设置动画

animation-name（动画名字）

animation-name：要对当前元素生效的关键帧的名字

animation-name:test;

---

animation-duration（动画执行时间）

animation-duration: 4s;

---

animation-delay（动画的延时）

animation-delay: 2s;

---

animation-timing-function（动画的时序函数）

animation-timing-function: ease-in-out;

---

animation-iteration-count（动画的执行次数）

animation-iteration-count: infinite;
							`无限执行`

---

animation-direction（动画的运行方向）

可选值：

animation-direction: normal;
			`默认值。每次都从from向to运行`	
	
animation-direction: reverse;
			`每次都从to向from运行`

animation-direction: alternate;
			`从from向to运行，重复执行动画时反向执行`		

animation-direction: alternate-reverse;
			`从to向from运行，重复执行动画时反向执行`					

---

animation-play-state（设置动画的执行状态）

可选值：

animation-play-state: running;
			`默认值。动画执行`
			
animation-play-state: paused;
			`动画暂停`

---

animation-fill-mode（动画的填充模式）

可选值：

animation-fill-mode: none;
			`默认值。动画执行完毕元素回到原来位置`

animation-fill-mode: forwards;
			`动画执行完毕元素会停止在动画结束的位置`

animation-fill-mode: backwards;
			`动画延时等待时，元素就会处于开始位置`

animation-fill-mode: both;
			`结合了forwards和backwards`
			

---

animation简写属性

animation: tese 2s infinite 1s alternate;

`唯一要求：
			animation-duration（运行时间）在前；
			animation-delay（延迟时间）在后面	`