首先，我们来简单介绍一下 CSS 动画。
最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。
CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置。
动画包括两个部分: 描述动画的样
CSS 动画的语法
接下来，我们简单看看 CSS 动画的语法。
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。
animation 的子属性有：
- animation-name：指定由 @keyframes 描述的关键帧名称。
- animation-duration：设置动画一个周期的时长。
- animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
- animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
- animation-iteration-count：设置动画重复次数， 可以指定 infinite 无限次重复动画
- animation-play-state：允许暂停和恢复动画。
- animation-timing-function：设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
- animation-fill-mode：指定动画执行前后如何为目标元素应用样式
- @keyframes 规则，当然，一个动画想要运行，还应该包括 @keyframes 规则，在内部设定动画关键帧
式规则和用于指定动画开始、结束以及中间点样式的关键帧。
