一個栗子上手CSS3動畫

最近雜七雜八的事情很多，很多知識都沒來得及總結，是時候總結總結，開啟新的篇章～

本篇文章不一一列舉CSS3動畫的屬性，若需要了解API，可前往 MDN 

在開始栗子前，我們先補補基礎知識。 

 

css3動畫分類：

• 補間動畫 – 具有連貫性的動畫  
• 逐幀動畫 – 使用steps過渡方式實現跳躍 

 

animation常用屬性及場景：

animation: name duration timing-function delay iteration-count direction;

1. timing-function屬性：  

• ease 規定慢速開始，然后變快，然后慢速結束的過渡效果。

• ease-in 規定以慢速開始的過渡效果。

• ease-out 規定以慢速結束的過渡效果。

• ease-in-out 規定以慢速開始和結束的過渡效果。

• linear 動畫從頭到尾的速度是相同的。

• cubic-bezier（n,n,n,n） 在cubic-bezier函數中自己的值，n取值為0～1

• steps()

2. delay屬性：用於將動畫與其他動畫的執行時機錯開，將動畫落到不同的時間點。這個屬性很好用～

 

動畫原則：

1. 運動一般有個慣性，所以要先快后有一個慢一點的反彈。
2. 背景若使用多個星星閃爍，錯位閃爍

 

配合JS使用

slide.addEventListener("webkitAnimationEnd", function() {
   console.log('eeee') //動畫結束再調用
});

有些情況我們需要確保動畫結束后再進行另外一些交互，可使用該事件監聽。 

 

---

 

 

實戰演習：

假如我們需要實現一個這樣簡單的動畫：

仔細觀察上面的動畫，我們發現，它可以由以下3部分組成：

1. 入場動畫——從右往左移動

2. 左右循環移動

3. 逐幀動畫

 

實現方法：

使用3個dom元素，最外層dom實現入場動畫，第二層dom實現左右移動，第三層dom實現逐幀動畫。

優點：調試方便，節省時間。

缺點：dom多。

1. dom結構

<div class="anima_entrance">
    <div class="anima_move">
        <div class="anima_sprite"></div>
    </div>
</div>

2. 分析動畫形成的時間軸：

入場動畫持續0.6s，只播放一次，左右移動以及逐幀動畫持續2s，循環播放，代碼如下：

.anima_entrance {
    animation: anima_entrance .6s ease-in-out both;
}

.anima_move {
    animation: anima_move 2s linear .6s infinite both;
}

.anima_sprite {
    animation: anima_sprite 2s step-end .6s infinite both;
}

 

3. 使用steps（）實現逐幀動畫：

使用下面這張雪碧圖，通過改變background-position實現動畫切換。

 

蹬蹬蹬，效果如下面所示，是不是很失望😞

 

原因：由於animation默認以ease方式過渡，它會在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫性的。此時可以使用steps()取消補間動畫。

貼一個圖：

• steps(1,start): 動畫一開始就跳到 100% 直到這一幀（不是整個周期）結束   == step-start
• steps(1,end): 保持 0% 的樣式直到這一幀（不是整個周期）結束   == step-end

接着，我們將timing-function改成 step-end，效果如下：

animation: sprite 2s step-end .6s infinite both;

出現想要的效果了哈～不錯。 

 

 

完整的css代碼如下： 

.anima_entrance {
    position: absolute;
    z-index: 3;
    top: 5.1rem;
    left: 4.05rem;
    width: 12.9rem;
    height: 19.1rem;
    -webkit-animation: anima_entrance .6s ease-in-out both;
    animation: anima_entrance .6s ease-in-out both;
}

.anima_move {
    width: 218px;
    height: 382px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 42px;
    -webkit-animation: anima_move 2s linear .6s infinite both;
    animation: anima_move 2s linear .6s infinite both;
}

.anima_sprite {
    width: 218px;
    height: 382px;
    background: url(demo.png) no-repeat 0 0;
    background-size: 25.8rem 19.1rem;
    -webkit-animation: anima_sprite 2s step-end .6s infinite both;
    animation: anima_sprite 2s step-end .6s infinite both;
}

@keyframes anima_entrance {
    0% {
        -webkit-transform: translate3d(18.75rem, 0, 0);
        transform: translate3d(18.75rem, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes anima_move {
    0%, 16%, 42%, 74%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    29% {
        -webkit-transform: translate3d(-1rem, 0, 0);
        transform: translate3d(-1rem, 0, 0);
    }
    87% {
        -webkit-transform: translate3d(1rem, 0, 0);
        transform: translate3d(1rem, 0, 0);
    }
}

@keyframes anima_sprite {
    0%, 16%, 42%, 58%, 74%, 100% {
        background-position: -12.9rem 0;
    }
    8%, 50%, 66% {
        background-position: 0 0;
    }
}