css动画制作

1.定义动画轨迹

@keyframes 轨迹名称{
from{
//开始位置的样式
}
to{
//结束位置的样式
}
}
或者：
@keyframes 轨迹名称{
0%{}
50%{}
60%{}
100%{}
}

2.元素执行轨迹
div{
animation-name:轨迹名称
anmation-duration:m/ms动画持续时间
anmation-delay:m/ms动画延迟时间
anmation-iteration-count动画迭代次数
number
infinite无限循环

aniamtion-fill-mode:动画在执行前和执行后，如何将样式应用到目标上：forwards backwards
aniamtiom-timing-function:
ease
ease-in
ease-out
eas-in-out
linear
steps():
animaton-direction:
}

---

anmation-direction：动画运行完是否交替方向或者重置起点
reverse反转
altermate交替反转
altermate-reverse 与altermate类似，只是第一次播放时需要反转
animation-timing-function:
ease
ease-in
ease-out
ease-in-out
linear
steps(3)
实例：
呼吸灯：

1.外圆
	1.扩大10px
	2.缩小10px
	3.保持不动
2.内圆
	1.外圆扩大的同时，内圆缩小10px
	2.外圆缩小的同时，内圆扩大10px
	3.内圆缩小12px
	4.内圆放大12px