animation属性
animation:
1. 动画的执行，不需要有用户的动作
2. animation动画的执行次数，是我们可以人为的控制的
transition:
1. transition动画的执行，需要有用户动作
2. transition动画的执行次数，依赖于用户的动作是否在进行【有用户的动作就执行，没有就结束】
语法：
@keyframes 动画序列名称 {
from {
开始状态
}
to {
结束状态
}
}
或者
@keyframes 动画序列名称 {
0%{
开始状态
}
100%{
结束状态
}
}
步骤：
1。 定义动画集
2。 通过animation属性去调用执行动画
| @keyframes | 定义动画
| animation-name | 规定 @keyframes 动画的名称。
| animation-duration | 规定动画完成一个周期所花费的时间。
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"，steps（步数）
| animation-delay | 规定动画何时开始。默认是 0。
| animation-iteration-count | 规定动画被播放的次数。默认是 1。还有 infinite
| animation-direction | 动画是否在下一周期逆向地播放。默认是 "normal"，alternate逆播放
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。还有“paused”
| animation-fill-mode | 规定动画结束后状态，保持 forwards 回到起始 backwards
| animation | 所有动画属性的简写属性
合写属性：
1.必须设置动画名称和动画时间。
2.各属性之间没有顺序要求。
3.如果同时设置了动画执行时间和延时时间，那么第一个时间永远都是执行时间。
总结：
1.一个元素可以同时调用多个动画集。
2.animation合写时，不同的动画集之间使用“，”隔开。
3.如果希望实现多状态，可以配合动画延时完成。
