CSS3 动画

动画 animation

可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

1. 先定义动画

@keyframes 动画名称 {
    0% { width: 100px; }
    50% { width: 150px; }
    100% { width: 200px; }
}

2. 再使用动画（必要属性）

div {
    animation-name: 动画名称;
 	animation-duration: 持续时间；
}

---

1. 动画常见属性

描述	属性	值（例）	默认值
速度曲线	animation-timing-function	ease-in-out 等	ease
播放延时	animation-delay	2s（单位：秒或毫秒）	0
播放次数	animation-iteration-count	循环 infinite	1
反向播放	animation-direction	开启 alternate	关闭 normal
结束位置	animation-fill-mode	保持 forwards	还原 barckwards
暂停动画	animation-play-state	停止 paused	运行 running

---

2. 速度曲线属性值

值	描述
linear	匀速
ease	慢 - 快 - 慢（默认）
ease-in	慢 - 快
ease-out	快 - 慢
ease-in-out	慢 - 快 - 慢
steps()	间隔停顿次数（步长）

---

3. 动画属性简写

animation: 动画1名称 持续时间 速度曲线 播放延时 播放次数 反向播放 结束位置, 动画2 ... ;

注意：简写属性里面不包含暂停动画，常与 :hover 配合使用

---

4. 过渡（transition）

可以把元素从一种样式变换为另一种样式时添加过渡效果（ie9以下版本不支持）

语法：transition: 过渡属性 花费时间 运动曲线 何时开始;

• 过渡属性：作用过渡的 css 属性（例：Width）
• 花费时间：效果过渡花费的时间，默认 0（单位：秒 s、毫秒 ms）
• 运动曲线：效果过渡的时间曲线，默认 ease
  • 渐慢：ease
  • 加速：ease-in
  • 减速：ease-out
  • 匀速：linear
  • 先加速后减速：ease-in-out
• 何时开始：设置时间为延时触发的时间，默认立即开始 0 （单位：秒 s、毫秒 ms）

注意：过渡写到本身上

		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			/*有多组属性，用逗号隔开*/
			/*transition: width 1s, height 1s, background-color 1s;*/
			
			/*all 所有属性都会变化*/
			transition:  all 1s;
		}
		div:hover {
			width: 300px;
			height: 300px;
			background-color: purple;
		}

---