语法示例

我们的第一个语法示例使用所有可用的属性/参数显示动画速记属性：

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

我们的第二个例子稍微简单一点，并表明可以省略一些属性：

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

我们的第三个例子显示了最小的声明。请注意，必须声明动画名称和动画持续时间：

  animation: 3s         slidein;
  /*         duration | name */

值得一提的是，当使用动画速记时，属性的顺序会有所不同。显然，浏览器可能会将你的持续时间与延迟相混淆。

如果简洁不是你的事，你也可以跳过速记属性并单独写出每个属性：

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;