CSS3 animation 基礎

最近項目有需求要作一個H5的頁面，涉及到CSS3 animation的使用。這裏作了一個項目中的總結。

• animation 基本用法

animation : [name] [keeping-time] [animate-function] [delay] [times] [iteration] [final]

• 第一個參數：name (animation-name)

定義動畫的名字，CSS3定義採用" 關鍵幀[keyframes] "來定義動畫

@keyframes fadeOut{
    0% { opacity : 1}
    100% { opacity : 0}
}

對應不一樣的瀏覽器須要加前綴作兼容。

以上代碼的意義：定義了一個動畫名字叫fadeOut，0%表明動畫初，100%表明動畫末。中間的動畫過程由瀏覽器渲染引擎進行渲染。其中能夠使用的時間段0%~100%,或者經過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。

• 第二個參數：keeping-time (animation-duration)

整個動畫持續的時間，必須帶時間單位，s或者ms

• 第三個參數：animate-function (animation-timing-function)

運動方式的貝塞爾曲線，基本值

linear       
// 動畫從頭至尾的速度是相同的。

ease        
// 默認。動畫以低速開始，而後加快，在結束前變慢。 

ease-in      
// 動畫以低速開始。

ease-out     
// 動畫以低速結束。

ease-in-out  
// 動畫以低速開始和結束。

cubic-bezier(n,n,n,n)
// 在 cubic-bezier 函數中本身的值。可能的值是從 0 到 1 的數值。

• 第四個參數：delay (animation-delay)

動畫延遲執行的時間，單位也是s或者ms。

• 第五個參數：times (animation-iteration-count)：

動畫循環執行的次數，無單位，infinite爲無限循環。

• 第六個參數：iteration (animation-direction)

若是動畫循環，循環的方式是：alternate(偶數次向前播放，奇數次向後播放)、normal(每次都向前播放)。

• 第七個參數：final (animation-fill-mode)：

動畫的最後（達到100%）時的狀態，取值有：backwards（回到初始狀態）、forwards（停在最終狀態）、none、both。

---

both詳解：(根據animation-direction決定)
當設置方向爲反方向的時候，根據動畫執行的次數判斷小球是否處於backwards仍是forwards的狀態，以上代碼是執行偶數次，動畫來回運動，最終回到初始狀態極爲backwards狀態，當爲奇數次時，則爲結束狀態forwards狀態

.center{
    border: 1px solid #332;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: rgba(0,0,0,0.5);
    -webkit-animation:ani 1s ease-in 2 alternate both;
}
@-webkit-keyframes ani{
    0%{-webkit-transform:translateX(0);}
    50%{-webkit-transform:translateX(40px);}
    100%{-webkit-transform:translateX(100px);}
}

<div class="center"></div>

• animation能夠設置多組動畫

.hr-3{
    -webkit-animation: zoomInUpHr 2s linear 19s 1 forwards, zoomOutUpHr 1s linear 25s 1 forwards;
}
// 一、動畫延遲19s進入zoomInUpHr動畫(動畫勻速播放持續2s)，播放一次後將中止在zoomInUpHr最終的狀態。二、動畫延遲25s進入zoomOutUpHr動畫(動畫勻速播放持續2s)，播放一次後將中止在zoomOutUpHr最終的狀態