頭疼的CSS3動畫，6種常見錯誤
本篇文章總結在CSS3動畫上遇到的問題，6種常見錯誤，以及解決方案。願每一位前端開發者在後來都能躲過這些坑！
常見錯誤：Animation篇
首先先來複習一下animation的有哪些屬性：
| 屬性名 | 預設 | 作用 |
|---|---|---|
| animation-name | none | keyframe 的名字 |
| animation-duration | 0s | 執行總時長 |
| animation-timing-function | ease | 執行的速度變化，總不可能總是勻速吧 |
| animation-delay | 0s | 延遲時間 |
| animation-iteration-count | 1 | 重複的次數，也可以是無限的infinite |
| animation-direction | normal | 動畫執行方向，可以正著來，也可以反著來reverse |
| animation-fill-mode | none | important 動畫結束之後和開始之前的狀態，是不是動畫未開始的時候就是預設樣式，結束的時候又返回預設樣式。 |
| animation-play-state | running | 動畫的狀態，注意如果說這個時候動畫執行結束了，狀態也是running，因為這個running不是表示動畫正在執行，而是一種狀態，有沒有被強行暫停。 |
常見錯誤一：動畫做完就disappear了！code play~
這個應該是animation中的基礎題，所以放在了第一位。
這個問題的解決方案就是 animation-fill-mode 這個屬性沒有設定或者設定錯誤。這個屬性從專業的角度來說是動畫的一個延續，就是0~100%的keyframe走完之後和開始之前的歸宿。
簡單地來說就是動畫結束之後或者開始之前，當前元素的狀態是否保留動畫最後一幀的狀態或者未開始之前使用第一幀的樣式。這個屬性預設是不保留狀態，也就是說開始之前是原始狀態，開始之後才開始轉換樣式，結束之後會立刻切換至原始狀態，彷彿這個動畫不曾存在過。
這裡的 forwards 是指動畫結束之後（無論是正著來還是倒這來）的狀態， backwards 是指動畫delay的時候的狀態。both就很簡單了，包含了結束之後和開始之前的狀態。當然大家更喜歡 both ，這樣就不用考慮之前或者之後的問題了。
常見錯誤二：怎麼停不下來，想控制動畫的動態。code play~
這裡我們可以借用 animation-play-state 來控制動畫的是否繼續。劃重點，這邊的是否繼續並不包含重新開始。
那麼，我可不可以通過控制 animation-direction 的值來控制動畫的重新開始呢？比如我一個動畫reverse一下之後又重新開始了。emmm，想法很好，但是現實很殘酷。animation的time很智慧，比如我在動畫的途中改變了動畫，然後animation會根據當前時間的反方向的狀態獲取狀態，然後從哪個點開始執行，也就是說在動畫途中改變direction，最終動畫還是按照原來的時間執行，也就是除非取消動畫，否則動畫的時間是固定的（當然會有一些小誤差）。所以想利用direction來讓動畫動起來就是太天真了。
既然如此，我可不可以來回動呢，比如一個element，我希望他可以從左到右再從右到左。這個時候 animation-direction 可以設定為 alternate ，這樣就會控制奇偶次數的不同動畫範圍，but！動畫次數要>1，不然哪裡來的奇偶
常見錯誤：Transition篇
複習一下transition的各個屬性值。
| transition屬性 | 預設值 | 作用 |
|---|---|---|
| transition-delay | 0 | 延遲 |
| transition-duration | 0 | 變換速度 |
| transition-property | all | 變化屬性，預設監控全部變化，如果只需要某一個值比如transform，就只監聽transform即可。 |
| transition-timing-function | ease | 時間函式 |
常見錯誤三：是我眼花了嗎，怎麼直接結束了，彷彿不曾存在過。play code
有一種情況，我在頁面首次渲染地時候就對transform進行了修改，想著只要改變tranform，transition就會工作。但是這個transition地工作性質是對比當前渲染狀態和上一次渲染狀態的的差別。因此像這個樣子改變，在首次渲染之前就改變了transform，transition失去了對比的參照物，然後就不動了，解決這個問題可以用requestAnimationFrame解決，這個方法就是用於渲染前的最後一步也就是paint之前的一步，然後修改了layout，最後transition感受到了召喚，識別出了差別，就正常工作了起來。
FailTransition.style.transform="translateX(100px)"
requestAnimationFrame(()=>{
SuccessTransition.style.transform="translateX(100px)"
})
步驟大概是這樣的：
Recalculate Style>Layout>requestAnimationFrame>Recalculate Style>Layout>Update Layer Tree>Paint>Composite Layers
還有一種情況，就是我們希望這個元素可以先向右再向左，根據上次的經驗我們可以這麼寫，但是失效了，為什麼呢？因為點選之後設定的樣式，還沒抵達paint就被requestAnimationFrame重寫了，然後就按照最後一次的樣式和上一次渲染的樣式做了對比，進行了變換。
change.addEventListener("click",()=>{
ChangeFrequency.style.transform="translateX(10000px)"
requestAnimationFrame(()=>{
ChangeFrequency.style.transform="translateX(50px)"
})
})
為了解決這個問題我們可以雙重requestAnimationFrame。然而可以看到生效了，但是transition會自動修復，1s內完成的動畫，絕不會超時，因此我們的動畫悲劇沒有按照我們設定的那樣向右移動1s之後再向左執行1s，而是總時間1s，所以會閃現結束。
change.addEventListener("click",()=>{
ChangeFrequency.style.transform="translateX(10000px)"
requestAnimationFrame(()=>{
requestAnimationFrame(()=>{
ChangeFrequency.style.transform="translateX(50px)"
}）
})
})
至於如何實現串聯動畫，我的第一選擇是animation，第二選擇是監聽transitionend事件，當地一個動畫結束後再執行之後的動畫。
function moveBack(){
ChangeFrequencyFix.style.transform="translateX(50px)"
ChangeFrequencyFix.removeEventListener("transitionend",moveBack)
}
ChangeFrequencyFix.addEventListener("transitionend",moveBack)
常見錯誤四：怎麼回事！怎麼從奇怪的地方出現了！這是一個小bug。code play
理想是從左上到右下，然後放大，動畫結束後，重新從原點出發，從上放大滑動到下方，然後卻直接從右下平行滑動到了最後的位置，這個小bug可以說是作死。因為transition的特性是保留上一次動畫的最後一幀，然後過渡到新的狀態，如果不想要某一個狀態的重置，記得關閉transition，否則就會出現連續的動畫。
function goTrravel(){
correctToGo.removeEventListener("transitionend",goTrravel)
correctToGo.style.transition="none"
correctToGo.classList.remove("active")
requestAnimationFrame(()=>{
requestAnimationFrame(()=>{
correctToGo.classList.add("pop")
correctToGo.style.transition="transform 2s,opacity 2s"
})
})
}
correctToGo.addEventListener("transitionend",goTrravel)
因為transition是實時監控的，所以如果如果去除了transform的狀態，他會回到default的狀態。因此，如果想要拋棄回到初始化或者某一狀態需要重置transition。
常見錯誤五：怎麼還在這個層下面？我都給你z-index:1000了，出來啊。動畫提升層code play
這裡需要提出兩個概念一個是 css context stack，MDN參考網址
一般情況下如果想要層級高，就用z-index設定就可以了。甚至父節點A的層級低於父節點B的層級，但是，再沒有提升層的情況下，同一層中父節點A的子節點可以高於父節點B的層級。但是若是產生了提升層，除非整個父節點A高於父節點B，父節點A中的子節點才可以高於父節點B的層級。
下圖就是一個例子，大家可以看見下面這個產生提升層的情況，裡面的黃色子節點是無法突破紅色節點的，因為他們已經處於不同的層了。z-index只作用於當前層，沒有跨層處理的能力。
<figcaption></figcaption>
常見錯誤六：will-change和translateZ(0)作用是一樣的。
這一塊，我們都知道如果想要加速GPU渲染就使用類似於hack的translateZ(0)或者是CSS新屬性will-change，那麼這兩者的原理是什麼，具體的使用情況是什麼？
其實他們就是一個提升層的概念，將之後可能會改變的元素從當前的層中抽離，阻止composition，這樣這部分修改的時候就不會影響整個頁面的佈局，從而阻止了reflow。
那麼translateZ(0)的作用是否和will-change一樣呢？不！
雖然他們都是提升層，但是will-change帶有快取作用，也就是說change的內容會被快取，只有第一動畫回paint之後的重複動畫就不會再繪製，但是translateZ(0)每次動畫都會重新繪製。可以說will-change對於重複動畫很有好了。但是！不要濫用哦~will-change會快取，因此很佔記憶體。大家慎用。
這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!
點選：加入