每周一個前端動畫之一：UC瀏覽器球隊展示動畫的實現

作為一個眼中有碼的人，看見某個網頁或者app的炫酷效果時，第一反應就是這怎麼實現的。這個系列就是把自己見到的一些動畫效果分析實現出來，本文分析實現的某些效果，僅僅作為一個思路分享，僅僅作為學習素材使用。閑話不說，這篇文章是前端動畫系列的第一篇。

源動畫效果

作為一個輕度偽球迷，經常會看些賽事比分，比如英超（利物浦是冠軍）。使用UC的朋友應該發現過，UC在展示比賽時的效果還是很炫的，動畫很簡單，但是效果的確不錯。效果圖如下：

實現分析

經過觀察不難發現：

• 動畫效果是左右對稱的，只要實現了一側即可。

• 球隊的logo只是在x軸進行了移動，但是停的位置以及停頓時機都需要注意

• 球隊logo有一個從大到小的縮放

• logo的透明度逐漸增大

分析出以上四點，就會發現效果實現起來也不複雜。

代碼實現

動畫使用CSS3的幀動畫實現 ,不熟悉該屬性用法的同學需要補補課了。注意該屬性的兼容性寫法，Safari 和 Chrome需要寫成

我們只分析左側曼聯logo的實現即可。從logo進入到動畫定格，我們將整個過程分成4個部分，可以確定4個關鍵幀：

關鍵幀1：logo放大一倍，x軸偏離初始位置到窗體外部。

關鍵幀2：logo放大一倍，x軸偏離初始位置到窗體中間部分，並稍作停頓，所以使用了50%，60%作停頓，時間函數使用了cubic-bezier來調整。

關鍵幀3：logo恢復到正常大小，x軸偏離初始位置略左側，透明度已經變成完全不透明。

關鍵幀4：即從偏左位置到達最終的停留位置

效果展示

GIF

關鍵點解讀計時函數

屬性可以作用於整個動畫中，定義了動畫的每次循環是如何隨時間遞進的。

動畫的實現其實很簡單，代碼已上傳到github，歡迎提出Issues【https://github.com/zhyjor/animation-css-demos.git】

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！