異名新接一個需求，實現一個文字的切換，結果發現過久沒寫css動畫，對animation屬性已經很陌生，尤爲是對steps()函數的理解已經丟掉了。css
animation 屬性概覽
animation相關的屬性比較多，異名看到本身前幾年學習這個屬性的時候作的導圖，發現這確實是一種很棒的概括方式，不該該丟掉，就趁着週末的時間review了一下，在之前的基礎上作了一些修正，也新增了一些有待之後填補的坑，好比動畫的性能優化等，這裏就不作展開了，想要獲取的源文件的朋友直接在公衆號回覆animation便可。前端
實現文字漸變切換
由於動效是比較簡單的兩條文案循環切換，因此也沒讓設計師出動效圖，這裏給出兩種實現方式。web
方式一就是使用js監聽animationiteration事件，動態切換文案瀏覽器
方式二就是利用animation-delay打個時間差，可是這種作法其實很不直觀，由於得去算兩個item之間的時間差，以及在關鍵幀中定義過渡的百分比，這些都是很很差維護的性能優化
理解和應用steps函數
設計師同窗認爲上面的文字漸變切換的表現很怪異，有種拖泥帶水的感受，設計師要求文字切換的時候」硬切「。這種時候若是用js動畫的話就很好辦了，一個定時器回調改變文案就行，可是由於使用場景的問題，我並不但願在這裏維護一個定時器，而剛好timing-function中提供了步進函數steps。要應用steps函數須要理解兩點，一個是steps中的start和end的區別，另一個是step步長和keyframes中的關鍵幀的關係。微信
start和end之間的關係其實經過步進的函數圖像就可以區別開：「start實際上是捨棄了第一幀，保留了最後一幀；end是保留第一幀，捨去最後一幀」，而step-start和step-end則分別是steps(1, start)和steps(1, end)的縮寫。app
接下來是理解steps和keyframes中的關係，這個就徹底是一個定義的問題了，「steps做用於每個關鍵幀之間」。好比下面的demo，能夠看出0%-50%之間和50%到100%之間都被拆分紅了兩步async
異名還發現有些人會習慣性地省略掉steps的第二個參數，直接steps(1) ，翻閱MDN文檔咱們知道這是錯誤的寫法，第二個參數不是可選參數，只不過瀏覽器幫你們作了一下兼容，不傳第二個參數也能正常運行，可是咱們本身寫的時候要避免這種寫法。編輯器
弄清了這兩個小概念以後，再回到需求當中，兩句文案的切換其實只須要作個交替切換步進函數便可，代碼和效果以下svg
一些很棒的效果實踐
animation除了實現常見的寬高、漸變、位移等動畫，其實也能夠做用在不少不一樣的屬性上，可以實現一些很棒的動畫效果。此次翻到了之前的筆記和博客，也分享一下當初寫過的效果
實現幀動畫
幀動畫有兩種方式，一種是直接切換背景圖，一種是把全部幀放在一張平鋪的精靈圖上面，而後經過position的變化來實現幀的變化，通常咱們都會使用後者，由於多張散圖的初次加載會致使動畫的閃爍，這裏演示就直接切換背景圖了。由於咱們知道step-end和step-start會分別省略第一幀和最後一幀，因此若是要讓逐幀動畫的全部幀都展現，咱們須要結合填充模式animation-fill-mode 把首幀和未幀的顯示分別交給forwards和backwards
實現路徑動畫
svg的部分屬性也是可以作動畫變化的，好比下面實現的這個logo的描邊就是很棒的一個效果
首先在AI中把logo導入，而後鋼筆勾勒logo的輪廓路徑，通常交給設計同窗幫忙就行，勾勒完路徑以後就導出爲svg，這一步主要是要獲取logo的path。而後結合stroke-dasharray和stroke-dashoffset 兩個屬性實現描邊的效果，其中stroke-dasharray 是把線條斷開，而stroke-dashoffset 是設置線條的偏移，咱們只要在動畫中動態設置偏移值就行，path有點大這裏也不貼了
svg {
stroke-dasharray: 800;
stroke-dashoffset: 1000;
animation: line 2s forwards;
}
@keyframes line{
from { stroke-dashoffset: 1000; opacity: 1; }
to{ stroke-dashoffset: 0; opacity: 0; }
}
實現3D動畫
這個是結合perspective和transform來實現3d的效果。經過 -webkit-perspective:1000px; 和 transform-style: preserve-3d; 來設置3d的視角深度和子元素的3d繼承關係，而後經過設置XYZ軸上的rotate和translate固定盒子的六個邊，而後在盒子上加上一個rotate3d的動態變化。
一些好的反饋
在剛入門的時候異名很是喜歡花時間來琢磨動畫，工做時間長了以後就發如今業務的絕大部分場景中僅僅只是須要一些簡單的位移、漸變效果，一些組件庫甚至都會把這些簡單的動畫封裝起來了，慢慢的一些屬性和實踐的問題就會被遺忘，再次遇到複雜動畫場景的時候就再去翻一下MDN的文檔，百度和掘金上搜一搜。
可是異名此次的體驗就很不同，異名想起了當初寫的博客，翻一下網盤甚至還發現了當初梳理的腦圖，我能快速撿起當初對這個知識點的認知，快速定位到我要去使用哪些屬性，之前寫過的那些特效還從新喚起我css動畫的興奮，這個過程太美妙了~
並且就在上週，異名還收到了一個博客園的消息推送，五年前寫的小demo到如今還有人在看，並且還能有所收穫，這真是幸福感滿滿的！
我以爲這大概就是寫博客的價值所在，一個是做爲本身之後查閱和複習的依據，一個是分享，當其餘小夥伴遇到和你同樣的場景的時候，也能從你的文字中借鑑到一些經驗。
本文分享自微信公衆號 - 異名（async-code）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。