「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」
CSS3中新增了动画相关的属性，其中@keyframes规则用于设置创建动画，其原理其实就是将一套css样式逐渐变成另外一套css样式，在@keyframes中可以使用百分比表示动画进度对应的样式，0% 是动画的开始样式，100% 动画的结束样式，每个样式可以称为"关键帧样式"，每个动画可以包含很多帧，每一帧可以设置一个或多个样式。语法格式:@keyframes 动画名:{0%:{css样式} ... 100%:{css样式}}，其中关键帧合法值是0-100%，from与 0% 相同，to与 100% 相同
使用@keyframes定义了动画，那如何使用呢？
那就得在对应要使用该动画的元素上添加animation属性
animation是一个复合属性，是所有动画属性的缩写，除animation-play-state
animation属性有以下一些子属性
1. animation-name 动画名，表示要应用哪个动画
2. animation-duration 动画完成一个周期所花费的时间（秒或毫秒数），默认0
3. animation-timing-function 表示动画速度曲线，常用关键字linear、ease、ease-in、ease-out、ease-in-out，默认是ease。还可以使用cubic-bezier(n,n,n,n)设置
4. animation-delay 动画延迟时间，默认0
5. animation-iteration-count 动画播放次数，默认1 只播一次
6. animation-direction 设置动画在下个播放周期是否逆转方向，默认是 "normal"正常播放，alternate轮流反向播放
7. animation-fill-mode 用于设置动画填充模式，none 不改变默认行为；forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；both向前和向后填充模式都被应用
8. animation-play-state 设置动画播放状态，paused动画已暂停，running是默认值，表示动画正在运行播放
