animation關鍵幀動畫語法

基本聲明和用法

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

為了簡潔起見，此頁面上的其余代碼將不使用任何前綴，但實際使用情況應使用上面的所有供應商前綴。

多個步驟

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}
#box {
   animation: fontbulger 2s infinite;
}

如果動畫具有相同的開始和結束屬性，則一種方法是用逗號分隔0%和100%值：

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

或者，你總是可以告訴動畫運行兩次(或任何偶數次)並告訴方向交替。

調用具有單獨屬性的關鍵幀動畫：

.box {
 animation-name: bounce;
 animation-duration: 4s; /* or: Xms */
 animation-iteration-count: 10;
 animation-direction: alternate; /* or: normal */
 animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
 animation-fill-mode: forwards; /* or: backwards, both, none */
 animation-delay: 2s; /* or: Xms */
}

動畫簡寫

只需將所有單個值用空格隔開。 順序無關緊要，除了同時使用持續時間和延遲它們必須保持那樣的順序。 在下面的示例中，1s =持續時間，2s =延遲，3 =迭代。

animation: test 1s 2s 3 alternate backwards;

結合變形和動畫

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}　

多個動畫

您可以使用逗號分隔值以在選擇器上聲明多個動畫。

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

steps()

steps()函數可精確控制在動畫時間范圍內將渲染多少個關鍵幀。 假設您聲明：

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

如果在動畫中使用step(10)，將確保在分配的時間內僅發生10個關鍵幀。

.move {
  animation: move 10s steps(10) infinite alternate;
}

那里需要非常棒的數學計算。 每隔一秒鍾，該元素將向左移動10px，向下移動10px，直到動畫結束，然后反向。

對於spritesheet動畫來說，像這個通過simurai進行的演示，這可能很棒。