作為一個眼中有碼的人，看見某個網頁或者app的炫酷效果時，第一反應就是這怎麼實現的。這個系列就是把自己見到的一些動畫效果分析實現出來，本文分析實現的某些效果，僅僅作為一個思路分享，僅僅作為學習素材使用。閒話不說，這篇文章是前端動畫系列的第一篇。
源動畫效果
作為一個輕度偽球迷，經常會看些賽事比分，比如英超（利物浦是冠軍）。使用UC的朋友應該發現過，UC在展示比賽時的效果還是很炫的，動畫很簡單，但是效果的確不錯。效果圖如下：
實現分析
經過觀察不難發現：
- 動畫效果是左右對稱的，只要實現了一側即可。
- 球隊的logo只是在x軸進行了移動，但是停的位置以及停頓時機都需要注意
- 球隊logo有一個從大到小的縮放
- logo的透明度逐漸增大
分析出以上四點，就會發現效果實現起來也不復雜。
程式碼實現
動畫使用CSS3的幀動畫實現animation,不熟悉該屬性用法的同學需要補補課了。注意該屬性的相容性寫法，Safari 和 Chrome需要寫成-webkit-animation
我們只分析左側曼聯logo的實現即可。從logo進入到動畫定格，我們將整個過程分成4個部分，可以確定4個關鍵幀：
@-webkit-keyframes team-logo-left {}
複製程式碼關鍵幀1：logo放大一倍，x軸偏離初始位置到窗體外部。
0% {
-webkit-transform: translate3d(-145px, 0, 0) scale(2);
-webkit-transform-origin: center;
-webkit-animation-timing-function: ease-out;
opacity: .05
}
複製程式碼關鍵幀2：logo放大一倍，x軸偏離初始位置到窗體中間部分，並稍作停頓，所以使用了50%，60%作停頓，時間函式使用了cubic-bezier來調整。
50%, 60% {
-webkit-transform: translate3d(76px, 0, 0) scale(2);
-webkit-transform-origin: center;
-webkit-animation-timing-function: cubic-bezier(.33, .95, .77, 1.01);
opacity: .8
}
複製程式碼關鍵幀3：logo恢復到正常大小，x軸偏離初始位置略左側，透明度已經變成完全不透明。
85% {
-webkit-transform: translate3d(-10px, 0, 0) scale(1);
-webkit-animation-timing-function: ease-in;
-webkit-transform-origin: center;
opacity: 1
}
複製程式碼關鍵幀4：即從偏左位置到達最終的停留位置
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
-webkit-transform-origin: center;
opacity: 1
}
複製程式碼效果展示
關鍵點解讀
計時函式animation-timing-function
- 屬性可以作用於整個動畫中，定義了動畫的每次迴圈是如何隨時間遞進的。
- 該屬性還可以作用於關鍵幀，如本例的用法，各個關鍵幀都有單獨的計時函式。這時的計時其實指的的幀之間的時間函式，順序播放的動畫，結尾關鍵幀的計時函式不會生效。
- 屬性的值可選，有
linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),以及還有階躍函式steps(n,start/end),有興趣的同學可以深入瞭解一下。
動畫的實現其實很簡單，程式碼已上傳到github，歡迎提出Issues