用CSS3製做版頭動畫

網易看遊戲官網（kanyouxi.163.com/）（已下架），是我之前…

怎樣的動畫？

這個動畫並不算複雜，但包含了transform，rotate，translate，keyframes，緩動，和循環次數這幾個重要的內容。好了，先看看動畫效果，下面是錄屏動畫，也能夠到網易看遊戲官網（kanyouxi.163.com/）(已下架)上去看看。

有幾個關鍵點，按順序分別爲：

1. 白色iPhone向上翻動，而後作幾個小幅度抖動；
2. 字幕從右邊出現，把白色iPhone向左推進；
3. 白色iPhone快到心頭後，黑色iPhone也跟隨出現；
4. 大標題「網易看遊戲」背景波浪式閃爍滾動。

下面讓咱們咱們一個個來。

注：這是一個CSS3進階實踐文章，若是你對CSS3動畫還不是很瞭解，請先看這裏：CSS3動畫，1分鐘快速瞭解一下再回來。

1. 向上翻動並抖動

這裏有幾個關鍵屬性，詳細使用方法能夠進去看：@keyframes， transform:rotate(deg);， transform-origin:x,y;

準備動畫關鍵幀 @keyframes

@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    100% {
        transform:rotate(0deg); 
        transform-origin:125px 600px;
        }            
}
複製代碼

咱們直接用百份比來做爲幀點，由於後面還會把它再細分多個幀。

設置旋轉與Anchor Point（錨點transform-origin:x,y;）

transform:rotate(-30deg);
transform-origin:125px 650px;
複製代碼

旋轉是必須的，但爲什麼要修改Anchor Point呢？

Anchor Point，是借用了cocos2D裏的說法，是指變換的原點。

由於transform的默認錨點是中心，即(50%,50%)，在transform裏Anchor Point屬性就是transform-origin，如下是默認值：

transform-origin:50%,50%
複製代碼

在支持3D的變換裏，還有第3個數值：z，默認是0

若是不修改，就會以iPhone的中心爲原點旋轉，這不是咱們想要的效果，因此把它移到下方的水平中央去。

這個圖片的寬度是250px，高度爲525px，下方中央就是(125px,525px)，但爲了模擬實物在桌子上搖擺，還要往下移一些，通過嘗試，咱們最終選擇了(125px,650px)，以下圖示：

添加抖動與擬物

抖動其實也是幾個關鍵幀組合的產物，首次旋轉不是0度，而是過了一點點的10度，接着往返各兩個關鍵幀，幅度逐漸減少。添加關鍵幀後的@keyframes改動以下：

@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    50% {
        transform:rotate(10deg);
        transform-origin:125px 600px;
        }
    75% {
        transform:rotate(-5deg);
        }
    100% {
        transform:rotate(0deg);
        }
}
複製代碼

注意，上面33%位置的幀處，添加了一條transform-origin:125px 600px;，由於若是一成不變的錨點，會給人感受像是一個鐘擺，太死板不夠擬物化，想像一下：一個東西以某個拋物線落到地上，通過與地面碰撞，改變運動方向，最終慢慢停下來，因此咱們把中心點的高度也減少一點，讓人看上去「不那麼規律」。

在關鍵幀的時間點上，也模擬了慢出的緩動效果。所謂的動畫感受作得好很差，也就是緩動效果作得如何，夠不夠接近物理世界給人的認知。

這個幀點也並不是最後的時間點，請繼續往下看。

2. 字幕出現並推走iPhone

字幕出現

字幕在另一個元素，因此咱們新建一個關鍵幀組：

@keyframes content{
    0% { transform: translate3d(550px,0,0);}
    100% { transform: translate3d(0,0,0);}
}
複製代碼

由於是iPhone動畫先走，而後纔是字幕，因此動畫延時執行animation-delay：

animation-delay:.2s;
複製代碼

但爲了兩個關鍵幀組能更好的同步，不用算來算去，咱們也以這樣作：

@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    100% { transform: translate3d(0,0,0); opacity: 1; }
}
複製代碼

先用透明度隱藏它，在40%纔開始，在移動的過程再逐漸顯示，讓過程更平滑。

前面還說到，中間還要用字幕推iPhone一下，怎麼作？

模擬碰撞

純CSS3是作不了的，除非全程用JS進行，或者用Box2D進行碰撞判斷。但咱們這裏只是一個簡單的走過場動畫，不須要人機交互，也不會變化移動的距離，因此，咱們用一個變戲法，兩個動畫一塊兒並行，在關鍵節點埋關鍵幀，即：字幕移動到iPhone位置時，iPhone纔開始移動。

兩個關鍵幀組結合起來就是：

@keyframes iphone-front{
    0% {transform:rotate(-30deg); transform-origin:125px 650px; opacity: 0;}
    20% {transform:rotate(10deg); transform-origin:125px 600px; opacity: 1;}
    30% {transform:rotate(-5deg);}
    38% {transform:rotate(0deg);}
    60% {transform: translate3d(0,0,0);  opacity: 1;}
    90% {transform: translate3d(-340px,0,0); }
    100% {transform: translate3d(-340px,0,0);}
}
@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    60% { transform: translate3d(225px,0,0); opacity: 1; }
    80% { transform: translate3d(0,0,0); opacity: 1; }
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

/*如下選擇器略去了非動畫屬性設置，例如寬高等，咱們就當他們默認就是正確的值吧*/
.iphone-front{ 
    animation: iphone-front 1.8s ease-out forwards;
}
.content{
    animation: content 1.8s ease-out;
}
複製代碼

能夠看出，這裏沒有使用delay屬性，是爲了更直觀的設置並行動畫，你們都在60%的位置碰頭，都使用了ease-out緩出。

爲何iphone-front的100%幀處要重複90%的內容？由於咱們用了animation-fill-mode屬性，值爲forwards，即停在最後一幀，若是100%沒有寫，就會退回到最初狀態了。

3. 黑色iPhone跟隨出現

黑色iPhone的動畫更簡單，只是一個漸現加移動，一樣也是另一個並行動畫，不過此次能夠用delay了，先預估一下大概出現的時間，能夠獲得從0.5s開始：

@keyframes iphone-back{
    0% { transform: translate3d(97px,0,0); opacity: 0;}
    40%{ opacity: 0; }
    50%{ transform: translate3d(0,0,0); opacity: 1;}
    100% {opacity: 1; }
}
.iphone-back-ani{
    animation: iphone-back 1.8s ease-out .5s forwards;
}
複製代碼

這裏不須要最後一幀重複寫代碼了，由於它原本就是(0,0,0)，不會產生任何變化。

爲什麼用translate3d(x,y,z);而不用translateX(x)？由於早前有人認爲這個效率會更高，特別在移動端性能更優。

查看手冊：transform

4. 大標題背景波浪

這個不涉及transfrom，讓前景與背景重疊在一塊兒，背景圖片在y軸不間斷移動，無限循環，無緩動；關鍵的是這個背景圖必須上下能無縫鏈接：

@keyframes title{
    0% { background-position: 0 0;}
    100% { background-position: 0 -76px;}
}

.title-bg{
    width: 301px; 
    height: 61px; 
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background: url(title_text_bg.png) repeat-y;
    animation: title 1.2s linear;
    animation-iteration-count:infinite;
}
.title-front{
    width: 301px; 
    height: 61px;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    background: url(title_text_front.png) no-repeat;
}
複製代碼

這是最簡單的作法，適合大多數狀況。也有另一些更高級的，例如使用mask，關於mask，有興趣請看《CSS Masking》。

其它效果

結語

手寫動畫，雖然比較費時，但能讓你瞭解現實原理。若是須要可視化製做，推薦一個在線工具給你們：cssanimate，相比其它生成器，優勢是能夠設置多個關鍵幀，並且能夠經過鼠標拖動直接操做，推薦！

【完】