版权声明： https://blog.csdn.net/weixin_41849462/article/details/81095046
在了解css3中的动画之前，我们必须搞清楚一个问题：我们为什么要学习它，它能给我们带来什么好处。
这个问题换种说法，就是css3中使用动画的意义：
首先同样的动画效果我们用css3来实现要比用JS实现要简单的多，
最重要的是从性能方面看，使用css3中的动画实现的效果远远比我们利用JS进行DOM操作的性能要好。
当我们搞清楚这个问题，接下来看它的用法：
1.首先@keyframes 声明规则，下面举个栗子：
@keyframes 规则名 {
0%{ 状态1 }
50%{ 状态2 }
100%{ 状态3 }
}
在规则声明是，规则名字是我们自己定义的，后面要调用，规则状态可以是多步，取决于需要；
2.在我们要进行动画操作的元素中添加调用动画的属性
animation：规则名 动画进行时长（一遍） 状态间切换方式 次数 循环方式；
栗子：animation： background 5s linear 2 alternate
来解释一个animation这个属性后面的一对参数的作用和用法：
首先要记住 要想让这个动画有效，必须具有 名字 和动画进行时长两个参数
状态切换方式 linear 连续切换，有渐变效果 step 直接从当前状态跳到下一个状态 可step（n）表示一次进行的步数
循环次数 可以写具体的值 infinite无数次
循环方式 normal默认没有循环 alternate正反循环 动画播放在第偶数次向前播放，第奇数次向反方向播放。