CSS 動畫

CSS 中的 transform，transition 和 animation 是分開的三部分內(nèi)容捞高，其中 transfrom 主要是控制元素變形氯材，并沒有一個時間控制的概念渣锦，而 transition 和 animation 才是動畫的部分，它們可以控制在一個時間段里氢哮，元素在兩個或以上的狀態(tài)切換的效果袋毙。

基本上我們會有這樣的一個簡單的概念，CSS 的動畫效果由瀏覽器控制和渲染冗尤，理論上比 JavaScript 的動畫效果性能好听盖，但是控制上沒有 JavaScript 那么靈活方便。

迪士尼出版的一本書中提及了動畫效果的十二個原則裂七，這篇文章講解得比較詳細皆看，并且將其結(jié)合到頁面動畫中：《網(wǎng)頁動畫的十二原則》。

transition

transition 允許我們在 CSS 屬性變化時給它添加一個過度的動畫效果背零。通常情況下腰吟，CSS 屬性變化是立即生效的，新的屬性值在超級短的時間內(nèi)替換掉舊的屬性值徙瓶，然后瀏覽器重新繪制樣式內(nèi)容（可能是 reflow 或者 repaint）毛雇。大部分情況下會感覺樣式變化突兀，而 transition 則可以添加順滑的一個變化效果侦镇。例如：

.content {
  background: magenta;
  transition: background 200ms ease-in 50ms;
}

.content:hover {
  background: yellow;
  transition: background 200ms ease-out 50ms;
}

transition 的兼容性灵疮，不算差，基本上移動設(shè)備都可以使用了壳繁，并且能做到漸進增強震捣，支持的便有過渡效果，不支持的便是直接切換闹炉，所以可以放心使用蒿赢。

transition 屬性

CSS 的 transition 有四個屬性：

transition-delay 延遲多久后開始動畫

transition-duration 過渡動畫的一個持續(xù)時間

transition-property 執(zhí)行動畫對應(yīng)的屬性，例如 color渣触，background 等诉植，可以使用 all 來指定所有的屬性

transition-timing-function 隨著時間推進，動畫變化軌跡的計算方式昵观，常見的有：linear，ease舌稀，ease-in啊犬，ease-out，cubic-bezier(...) 等壁查。詳細參考：transition-timing-function觉至，里邊有各個效果的簡單例子。

這四個屬性可以簡寫成為：

.class {
   transition: <property> <duration> <timing-function> <delay>  
}

例如前邊的那個例子睡腿，當(dāng) .content 元素 hover 時语御，50 毫秒后背景顏色從 magenta 漸變到 yellow峻贮，持續(xù)時間 200 毫秒，使用的是 ease-out 的算法应闯。留意下：transition 生效的是對應(yīng)的選擇器的屬性纤控，例如 .content:hover 中的 transition 便是從 .content 的 magenta 到 yellow 過渡效果的控制，而 .content 中的 transition則是控制不 hover 時碉纺，背景顏色從 yellow 到 magenta 的變化過程船万。

all 這個屬性值是這樣的，它對應(yīng)選擇器下的元素的所有 CSS 屬性生效骨田，無論在哪里聲明的 CSS 規(guī)則耿导，并不局限于在同個代碼塊下。

如果需要不同屬性對應(yīng)不同的效果态贤，可以這么來寫：

.demo {
  transition-property: all, border-radius, opacity;
  transition-duration: 1s, 2s, 3s;
  /* 當(dāng)這樣使用時舱呻，確保 all 在第一個，因為如果 all 在后邊的話悠汽，它的規(guī)則會覆蓋掉前邊的屬性 */
}

transition 的 none 屬性較少用到箱吕，一般用于移除原本有的動畫效果。none 沒法和逗號一起使用來移除特定屬性的動畫效果介粘，只能直接干掉 transition殖氏，如果要移除特定的屬性效果，可以重寫 transition 而不把要移除的屬性寫進去姻采，或者比較 trick 的做法是設(shè)置 duration 為 0雅采。

并不是所有的 CSS 屬性都是可以添加 transition 效果的。詳細可以參考文檔：animatable properties慨亲』楣希可能經(jīng)常遇到的就是 display 這個屬性并不能添加 transition 效果，你可以考慮使用 visibility 或者后邊會提及的 animation刑棵。

關(guān)于 transition-timing-function 的各個算法的一個變化曲線是怎么樣的巴刻，我們可以使用 chrome 的開發(fā)者工具來看一下，CSS 中你編寫了對應(yīng)的 transition 后蛉签，把鼠標(biāo)移到 transition-timing-function 的那個值前邊胡陪，如下圖：

image.jpeg

transition 相關(guān)的事件

transitionend 事件會在 transition 動畫結(jié)束的時候觸發(fā)。通常我們會在動畫結(jié)束后執(zhí)行一些方法碍舍，例如繼續(xù)下一個動畫效果或者其他柠座。Zepto.js 中的動畫方法都是使用 CSS 動畫屬性來處理，而其中動畫運行后的回調(diào)便應(yīng)該是使用這個事件來處理片橡。

transitionend 事件觸發(fā)時會傳入一些動畫相關(guān)的參數(shù)妈经，例如：propertyName，elapsedTime，詳細內(nèi)容可以參考：transitionend吹泡。

transition 應(yīng)用

transition 在很多 UI 框架中是很常見的屬性骤星，當(dāng)我們開發(fā)一個交互效果的時候，從某個狀態(tài)到達另外一個狀態(tài)時爆哑，transition 可以使得這個過程變得更加舒適和順滑洞难。例如上邊的 hover 時的背景顏色的切換，控制元素的顯示和隱藏時使用 opacity 來實現(xiàn)漸隱漸現(xiàn)泪漂。

當(dāng) transition 配合上 transform 提供的多樣化的元素變化能力后廊营，便可以繪制出很多有趣的交互漸變效果了。最近使用過程中做的一個簡單效果的例子萝勤，點擊查看露筒。

很常見還有表單 input 報錯時邊框變紅，按鈕 hover 時背景漸變等敌卓，很多的 CSS 交互效果會因為 transition 變得更加自然慎式。

animation

雖然 transition 已經(jīng)提供了很棒的動畫效果了，但是我們只能夠控制從一個狀態(tài)到達另外一個狀態(tài)趟径，沒法來控制多個狀態(tài)的不斷變化瘪吏，而 animation 而幫助我們實現(xiàn)了這一點。使用 animation 的前提是我們需要先使用@keyframes 來定義一個動畫效果蜗巧，@keyframes 定義的規(guī)則可以用來控制動畫過程中的各個狀態(tài)的情況掌眠，語法大抵是這個樣子：

 @keyframes W {
   from { left: 0; top: 0; }
   to { left: 100%; top: 100%; }
 }

@keyframes 關(guān)鍵詞后跟動畫的名字，然后是一個塊幕屹，塊中有動畫進度的各個選擇器蓝丙，選擇器后的塊則依舊是我們常見的各個 CSS 樣式屬性。

在這里望拖，控制動畫的整個過程的選擇器很重要渺尘，語法相對簡單，你可以使用 from 或者 0% 來表示起始狀態(tài)说敏，而 to 或 100% 來表示結(jié)束狀態(tài)鸥跟。中間的部分你都可以使用百分比來進行表示。選擇器后的塊則是在到達這個進度狀態(tài)時元素的樣式應(yīng)該是怎么樣的盔沫，整個的過渡動畫在這個的控制基礎(chǔ)上由瀏覽器去繪制医咨。

同樣地，不是所有的屬性都可以有動畫效果架诞，MDN 維護了一份CSS動畫的屬性列表可供參考腋逆。

通常來說，多個狀態(tài)下的相同屬性的值應(yīng)該是可以取到它們的中間值的侈贷，例如 left 從 0% 到 100%，如果沒法取到中間值，如 height 從 auto 到 100px俏蛮，有可能出現(xiàn)奇怪的一些狀況撑蚌，并且不同瀏覽器對此的處理也不盡相同，所以請盡量避免這種情況搏屑。

animation 屬性

animation的屬性比 transition 多争涌，如下：

animation-name 你需要的動畫效果的 @keyframes 的名字。

animation-delay 和 transition-delay 一樣辣恋，動畫延遲的時間亮垫。

animtaion-duration 和 transition-duration 一樣，動畫持續(xù)的時間伟骨。

animation-direction 動畫的一個方向控制饮潦。
默認是 normal，如果是上述的 left 從 0% 到 100%携狭，那么默認是從左到右继蜡。如果這個值是 reverse，那么便是從右到左逛腿。

由于 animation 提供了循環(huán)的控制稀并，所以還有兩個值是 alternate 和 alternate-reverse，這兩個值會在每次循環(huán)開始的時候調(diào)轉(zhuǎn)動畫方向单默，只不過是起始的方向不同碘举。

例如還是 left 的例子，假設(shè)設(shè)置了 animation-direction: alternate; animation-iteration-count: infinite;搁廓，那么這個元素從左到右移動后引颈，便調(diào)轉(zhuǎn)方向，從右到左枚抵，如此循環(huán)线欲。

animation-fill-mode 這個屬性用來控制動畫前后，@keyframes 中提供的 CSS 屬性如何應(yīng)用到元素上汽摹。默認值是 none李丰，還有其他三個選擇：forwards，backwards逼泣，both趴泌。

假設(shè)是 none，那么動畫前后拉庶，動畫中聲明的 CSS 屬性都不會應(yīng)用到元素上嗜憔。即動畫效果執(zhí)行后，元素便恢復(fù)正常狀態(tài)氏仗。

如果是 forwards吉捶，那么動畫結(jié)束后，會把最后狀態(tài)的 CSS 屬性應(yīng)用到元素上，即保持動畫最后的樣子呐舔。而 backwards 則相反币励，both 則都會，計算得出最后的一個結(jié)果珊拼。

animation-timing-function 和 transition-timing-function 一樣食呻，動畫變化軌跡的算法。

animation-iteration-count 動畫循環(huán)次數(shù)澎现，如果是 infinite 則無限次仅胞。有趣的是，支持小數(shù)剑辫，即 0.5 表示動畫執(zhí)行到一半干旧。

animation-play-state 動畫執(zhí)行的狀態(tài)，兩個值 running 或者 paused揭斧，可以用來控制動畫是否執(zhí)行莱革。

上述這些屬性可以簡寫為：

.class {
   animation: <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state> <name>
 }

略長，當(dāng)然讹开，平時使用中可能是省略部分參數(shù)的盅视。

animation 需要留意的東西

優(yōu)先級

記得 CSS 中的層疊概念么，優(yōu)先級高的屬性會覆蓋優(yōu)先級低的屬性旦万，當(dāng) animation 應(yīng)用到元素中時闹击，動畫運行過程中，@keyframes 聲明的 CSS 屬性優(yōu)先級最高成艘，比行內(nèi)聲明 !important 的樣式還要高∩桶耄現(xiàn)在瀏覽器的實現(xiàn)是這樣子的，但是標(biāo)準(zhǔn)文檔中的說法應(yīng)該是可以被 !important 聲明的屬性所覆蓋淆两。

多個動畫的順序

由于 animation-name 是可以指定多個動畫效果的断箫，所以這里便會出現(xiàn)動畫的一個順序問題。后指定的動畫會覆蓋掉前邊的秋冰，例如：

   #colors {
     animation-name: red, green, blue; /* 假設(shè)這些 keyframe 都是修改 color 這個屬性 */
     animation-duration: 5s, 4s, 3s;
   }

上述代碼的動畫效果會是這樣：前 3 秒是 blue仲义，然后接著 1 秒是 green，最后 1 秒是 red剑勾。整個覆蓋的規(guī)則是比較簡單的埃撵。

display 的影響

如果一個元素的 display 設(shè)置為 none，那么在它或者它的子元素上的動畫效果便會停止虽另，而重新設(shè)置 display 為可見后暂刘，動畫效果會重新重頭開始執(zhí)行。

animation 相關(guān)事件

我們可以通過綁定事件來監(jiān)聽 animation 的幾個狀態(tài)捂刺，這些事件分別是：

animationstart 動畫開始事件谣拣，如果有 delay 屬性的話募寨，那么等到動畫真正開始再觸發(fā)，如果是沒有 delay森缠，那么當(dāng)動畫效果應(yīng)用到元素時绪商，這個事件會被觸發(fā)。

animationend 動畫結(jié)束的事件辅鲸，和 transitionend 類似。如果有多個動畫腹殿，那么這個事件會觸發(fā)多次独悴，像上邊的例子，這個事件會觸發(fā)三次锣尉。如果 animation-iteration-count 設(shè)置為 infinite刻炒，那么這個事件則不會被觸發(fā)。

animationiteration 動畫循環(huán)一個生命周期結(jié)束的事件自沧，和上一個事件不一樣的是坟奥，這個在每次循環(huán)結(jié)束一段動畫時會觸發(fā)，而不是整個動畫結(jié)束時觸發(fā)拇厢。無限循環(huán)時爱谁，除非 duration 為 0，否則這個事件會無限觸發(fā)孝偎。

animation event 相關(guān)的屬性可以參考：animationEvent访敌。

animation 應(yīng)用

animation 可以實現(xiàn)控制在多個狀態(tài)下進行動畫切換，所以應(yīng)用的場景比 transition 要廣泛得多衣盾，可以使用 animation 實現(xiàn)大量的動效寺旺，具體可以查看下 animate.css這個庫。

我上邊提到的簡單例子中也包括了一個簡單地使用 animation 來縮放字體势决，和一個簡單進度條的例子阻塑。

CSS 動畫的性能

現(xiàn)在越來越多的頁面開發(fā)是面向移動端，所以我們會更加關(guān)注性能方面的問題果复。瀏覽器繪制動畫的過程中陈莽，涉及的主要是 Layout，Paint据悔，Composite 的處理传透，當(dāng)一個動畫觸發(fā)的瀏覽器處理越少，影響的區(qū)域越少极颓，那么便消耗越低朱盐，性能上越好。

我們可以參考這個 CSS Triggers 網(wǎng)站提供的列表菠隆，這里展示了修改屬性時對應(yīng)的瀏覽器內(nèi)核所需要做的處理兵琳。簡單概括來說狂秘，動畫盡量少涉及布局相關(guān)的調(diào)整，因為布局上一旦變化躯肌，會涉及外部元素和內(nèi)部元素的位置調(diào)整者春，對瀏覽器的消耗相當(dāng)大，而在現(xiàn)代瀏覽器中清女，擁有比較好動畫性能的屬性就是 transform 和 opacity钱烟，建議需要動畫的時候多往這兩個屬性考慮，例如字體要放大嫡丙，避免使用 font-size拴袭，而是用 transform: scale()等。

我們可以使用 will-change 來聲明即將變化的屬性曙博，這可以讓瀏覽器提前做一些優(yōu)化工作拥刻，關(guān)于這個屬性，更多內(nèi)容可以參考: will-change父泳。值得留意的是般哼，別濫用 will-change，在太多的元素上使用或者應(yīng)用太多的屬性都會導(dǎo)致瀏覽器資源浪費惠窄。

Chrome 瀏覽器的開發(fā)者工具提供的 Timeline 工具可以幫助我們來查看頁面渲染的一個性能表現(xiàn)情況蒸眠，如下圖：