摘要：無(wú)效生效重復(fù)怎么辦與規(guī)則一樣，標(biāo)準(zhǔn)規(guī)定相同的關(guān)鍵幀不產(chǎn)生層疊，僅最后出現(xiàn)的認(rèn)定為有效。但實(shí)際上和均將關(guān)鍵幀設(shè)計(jì)為可層疊的。為默認(rèn)值，表示動(dòng)畫(huà)一結(jié)束，動(dòng)畫(huà)效果就結(jié)束表示動(dòng)畫(huà)一開(kāi)始就馬上執(zhí)行完第一個(gè)關(guān)鍵幀的效果。

?在《CSS魔法堂：Transition就這么好玩》中我們了解到對(duì)于簡(jiǎn)單的補(bǔ)間動(dòng)畫(huà)，我們可以通過(guò)transition實(shí)現(xiàn)。那到底多簡(jiǎn)單的動(dòng)畫(huà)適合用transtion來(lái)實(shí)現(xiàn)呢？答案就是——我們只需定義動(dòng)畫(huà)起始和結(jié)束幀的狀態(tài)的動(dòng)畫(huà)。一旦關(guān)鍵幀數(shù)大于2時(shí)，我們必須轉(zhuǎn)向CSS Animation了。本文為這段時(shí)間學(xué)習(xí)的記錄，歡迎拍磚。

語(yǔ)法：

@keyframes  {
  [ {
    /* CSS Properties */
  }]*
}

示例：

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

注意項(xiàng)：
1.的命名規(guī)范

// 命名需要遵循以下規(guī)則
const rIsInvalid = /^--|^[0-9]+-|^(?:unset|initial|inherit|none)$/
    , rIsValid = /^[0-9a-z-_]+$/i
function isValidAnimationName(animationName: string): boolean{
  return !rIsInvalid.test(animationName) && rIsValid(animationName)
}

2.取值
0-100%、from，等價(jià)與0%、 to，等價(jià)與100%。
3.重復(fù)怎么辦
@keyframes CSS規(guī)則不支持層疊樣式，因此當(dāng)出現(xiàn)多個(gè)同名keyframes，那么僅最后出現(xiàn)的那個(gè)有效。

/* 無(wú)效 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* 生效 */
@keyframes rotate {
  from { transform: rotate(90deg); }
  to { transform: rotate(-360deg); }
}

4.重復(fù)怎么辦
與@keyframes CSS規(guī)則一樣，標(biāo)準(zhǔn)規(guī)定相同的關(guān)鍵幀不產(chǎn)生層疊，僅最后出現(xiàn)的認(rèn)定為有效。
但實(shí)際上FireFox14+和Chrome均將關(guān)鍵幀設(shè)計(jì)為可層疊的。

@keyframes rotate {
  from { transform: rotate(0deg); }
  from { background: red; }
  /* 上述兩條time offset實(shí)際上等價(jià)于
   * from { transform: rotate(0deg); background: red; }
   */
  to {
    transform: rotate(360deg);
    background: yellow;
  }
}

5.!important導(dǎo)致屬性失效
一般情況下使用!important會(huì)讓CSS屬性獲得最高權(quán)重，但在@keyframes下卻會(huì)導(dǎo)致該CSS屬性失效。

@keyframes rotate {
  from {
    transform: rotate(90deg);
    background: red!important; /* background屬性無(wú)效 */
  }
  to { transform: rotate(-360deg); }
}

6.必須提供至少兩個(gè)關(guān)鍵幀

/* 不會(huì)根據(jù)緩動(dòng)函數(shù)產(chǎn)生動(dòng)畫(huà)效果，而是在動(dòng)畫(huà)持續(xù)時(shí)間的最后瞬間移動(dòng)過(guò)去 */
@keyframes move-left{
   to {
       left: 100px;
   }
}

 {
  animation: 
             
             
             
             
             
             
             ;
}

示例：

.box.rotate {
  animation: rotate 10s infinite alternate;
}

，指定通過(guò)@keyframes定義的補(bǔ)間動(dòng)畫(huà)名稱。
，動(dòng)畫(huà)持續(xù)時(shí)長(zhǎng)，默認(rèn)為0s。單位為s和ms。
，動(dòng)畫(huà)播放延遲，默認(rèn)為0s。單位為s和ms。
，動(dòng)畫(huà)重復(fù)播放次數(shù)，默認(rèn)為1，infinite表示無(wú)限循環(huán)。動(dòng)畫(huà)播放總時(shí)長(zhǎng)為*。
，可選值為normal | reverse | alternate | alternate-reverse，分別表示動(dòng)畫(huà)播放順序是從from到to，從to到from，從from到to再?gòu)膖o到from和從to到from再?gòu)膄rom到to。注意：設(shè)置alternate|alternate-reverse時(shí)，animation-iteration-count必須大于1才能看到效果
，可選值為none | forwards | backwards | both，用于設(shè)置動(dòng)畫(huà)開(kāi)始前和結(jié)束后是否應(yīng)用0%和100%的樣式對(duì)元素上。分別表示不應(yīng)用，應(yīng)用100%的樣式，延遲播放期間應(yīng)用0%的樣式和0%和100%的樣式均應(yīng)用。
注意：

默認(rèn)情況下(none)，動(dòng)畫(huà)結(jié)束后會(huì)恢復(fù)動(dòng)畫(huà)前的樣式；

設(shè)置backwards時(shí)，值大于0才能看到效果。

，可選值running | paused，獲取和設(shè)置播放狀態(tài)。注意：通過(guò)這個(gè)屬性，我們僅能實(shí)現(xiàn)暫停和繼續(xù)播放的效果，無(wú)法實(shí)現(xiàn)重播，更別說(shuō)回放了
，用于設(shè)置緩動(dòng)函數(shù)類型，值為ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps(, ) | frames() | cubic-bezier(,,,)。
其中ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(,,,)的效果均為連續(xù)漸變的，而step-start | step-end | steps(, ) | frames()則為突變效果。下面我們深入理解后者吧。

?step-start實(shí)際上等價(jià)于steps(10, start)，而step-end則等價(jià)于steps(10)，所以我們只要理解好steps(, )即可。

/* 通過(guò)設(shè)置在一個(gè)動(dòng)畫(huà)周期內(nèi)()的平均刷新幀數(shù)，實(shí)現(xiàn)突變動(dòng)效。具體應(yīng)用有：游戲精靈行走、打字效果等
 *  - 兩個(gè)關(guān)鍵幀間的刷新次數(shù)
 *  - 方向，可選值為 end | start。
 *               end為默認(rèn)值，表示動(dòng)畫(huà)一結(jié)束，動(dòng)畫(huà)效果就結(jié)束;
 *               start表示動(dòng)畫(huà)一開(kāi)始就馬上執(zhí)行完第一個(gè)關(guān)鍵幀的效果。
 */
steps(, )

從張旭鑫那偷來(lái)的解釋：
start：表示直接開(kāi)始。也就是時(shí)間才開(kāi)始，就已經(jīng)執(zhí)行了一個(gè)距離段。于是，動(dòng)畫(huà)執(zhí)行的5個(gè)分段點(diǎn)是下面這5個(gè)，起始點(diǎn)被忽略，因?yàn)闀r(shí)間一開(kāi)始直接就到了第二個(gè)點(diǎn)：

end：表示戛然而止。也就是時(shí)間一結(jié)束，當(dāng)前距離位移就停止。于是，動(dòng)畫(huà)執(zhí)行的5個(gè)分段點(diǎn)是下面這5個(gè)，結(jié)束點(diǎn)被忽略，因?yàn)榈纫獔?zhí)行結(jié)束點(diǎn)的時(shí)候已經(jīng)沒(méi)時(shí)間了：

另外通過(guò)將設(shè)置為forwards，那么當(dāng)設(shè)置為end時(shí)，也會(huì)顯示(保持)動(dòng)畫(huà)最后一個(gè)關(guān)鍵幀的樣式。

const target = document.getElementById("target")
target.addEventListener("animationstart", e => {
  // 動(dòng)畫(huà)開(kāi)始時(shí)觸發(fā)
})
target.addEventListener("animationiteration", e => {
  // 每次重復(fù)執(zhí)行動(dòng)畫(huà)時(shí)觸發(fā)
  // 當(dāng)為1時(shí)，不會(huì)觸發(fā)。
})
target.addEventListener("animationend", e => {
  // 當(dāng)動(dòng)畫(huà)結(jié)束時(shí)觸發(fā)
})

到這里我們已經(jīng)可以通過(guò)@keyframes定義和應(yīng)用CSS Animation了，但我們能否獲取對(duì)動(dòng)畫(huà)效果更多的控制權(quán)呢？如開(kāi)始、暫停、繼續(xù)、重播。通過(guò)我們能輕易實(shí)現(xiàn)開(kāi)始、暫停和繼續(xù)的效果，但重播卻沒(méi)那么容易。

function pause (target: HTMLElement):boolean {
  const isRunning = target.style.animationPlayState == "running"
  if (isRunning) {
    target.style.animationPlayState = "paused"
  }
  
  return isRunning
}

function play (target: HTMLElement):boolean {
  const isStop = target.style.animationPlayState == "paused"
  if (isStop) {
    target.style.animationPlayState = "running"
  }
  
  return isStop
}

function replay (target: HTMLElement, animationClassName: string):void {
  // 先移除動(dòng)畫(huà)效果
  target.classList.remove(animationName)
  // requestAnimationFrame的回調(diào)函數(shù)會(huì)在下一次界面渲染前執(zhí)行
  requestAnimationFrame(_ => {
    // 這時(shí)動(dòng)畫(huà)的影響還在，所以要等界面渲染完后再重新啟用動(dòng)畫(huà)效果，才能實(shí)現(xiàn)重播
    requestAnimationFrame(_ => {
      target.classList.add(animationName)
    })
  })
}

CSS3為我們提供了動(dòng)畫(huà)效果，除了提供比Transition更豐富的可控性，比JavaScript更簡(jiǎn)易的API，還讓我們可以使用GPU來(lái)加速呢^_^
尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)自：https://www.cnblogs.com/fsjoh... ^_^肥仔John

https://developer.mozilla.org...
https://designmodo.com/steps-...
http://lea.verou.me/2011/09/p...
http://jsfiddle.net/simurai/C...
https://www.zhangxinxu.com/wo...