css动画

1. animation: move 1s 部分就是动画的第一部分，用于描述动画的各个规则;

2. @keyframes move {} 部分就是动画的第二部分，用于指定动画开始、结束以及中间点样式的关键帧;

一个 CSS 动画一定要由上述两部分组成。

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 规则，在内部设定动画关键帧