語法示例

我們的第一個語法示例使用所有可用的屬性/引數顯示動畫速記屬性：

  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;