CSS animation 动画

• animation-name： 要对当前元素生效的关键帧的名字，如：animation-name: test;

• animation-duration： 动画的执行时间，如：animation-duration: 4s;

• animation-iteration-count： 动画执行的次数，如：animation-iteration-count: 4，可选值：数字或 infinite，其中数字的大小就是执行的次数，而 infinite 则表示无限次。

• animation-timing-function： 指定动画执行的时序函数； https://www.jianshu.com/p/d999f090d333

  

• animation-direction： 指定动画运行的方向，可选值如下：

  normal：默认值，从 from 到 to 运行，每次都是这样；

  reverse：从 to 到 from 运行，每次都是这样；

  alternate：从 from 向 to 运行，重复执行动画时会方向执行，即第一个是从 from 到 to，第二次则是从 to 到 from……；

  alternate-reverse：与 alternate 的执行时反向的；

• animation-play-state： 控制动画的运行状态，可选值如下：

  running：默认值，动画运行；

  paused：动画暂停；

• animation-fill-mode： 动画的填充模式，可选值如下：

  none：默认值，动画执行完毕后，元素回到原来的位置；

  forwards：动画执行完毕后，元素会停止在动画执行结束的位置；

  backwards：动画延时等待时，元素就会处于开始的位置，即 from 或 to 所指定的位置；

  both：结合了 forwards 和 backwards；

---

animation: name duration timing-function delay iteration-count direction fill-mode;