CSS 语法范例

示例

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

  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-name和animation-duration：

  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;