用 CSS 做簡單動畫 - 關鍵影格(@keyframe)

想要做動畫已經不再只能用 JavaScript 或 jQuery 才做得到，從 CSS3 開始也可以做出簡單甚至有些複雜的動畫了。

animation 基本介紹

animation 是讓 CSS 從一個狀態轉到另一個狀態，藉此來產生動畫效果，而中間轉換的過程，需要借助 關鍵影格(@keyframe) 來達成效果。
關鍵影格(@keyframe) 可以設定各個狀態間轉換的時點，形成一些動畫上快慢的差別。

簡單動畫範例 >> 方塊由左至右水平移動

Html

<!-- 先準備一段簡單的 html -->
<div class="square"></div>

CSS

.square {
    width: 100px;
    height: 100px;
    background: blue;
    display: block;
    position: relative;

    /* animation 參數設定 */
    animation-name: MoveToRight;    /*動畫名稱，需與 keyframe 名稱對應*/
    animation-duration: 4s;    /*動畫持續時間，單位為秒*/
    animation-delay: 2s;    /*動畫延遲開始時間*/
    animation-iteration-count: infinite;    /*動畫次數，infinite 為無限次*/    
}

/* 關鍵影格(@keyframe) */
@keyframes MoveToRight {
    0% { left: 0; }
    25% { left: 20%; }
    50% { left: 40%; }
    75% { left: 60%; }
    100% { left: 80%; }
}

如果想要在每個不同時點設定不同屬性，則用 0% ~ 100% 分別設定屬性，
若只是想要一個簡單、連續的動畫，則可以使用 from to 設定即可，
以上述的例子為例，@keyframe 也可以改成以下的寫法：

@keyframes MoveToRight {
    from { left: 0; }
    to { left: 80%; }
}

info你會發現 2 個寫法雖然都是向右移動，但第一個會"有頓點"，第二個"較連續"，而要使用哪種寫法，就要看需求而定了。

animation vs transition

transition

不能有時間上個別設定的功能，比較類似上述 from to 的效果，因此動畫效果會比較單一。

animation

因為有 關鍵影格(@keyframe) 可以設定，可以達成更多更複雜的動畫。

至於使用哪種方法來寫 CSS 動畫，就視需求而定。

注意事項

animation 動畫基本上在停止時都會回到最初的設定，因此如何讓 animation 停止時是在最後出現的位置呢？

基本上就是加上下面的屬性：

animation-fill-mode: forwards;
animation-fill-mode 屬性規定動畫在播放前後是否可見。 forwards 參數是說，當動畫結束時，可以停在最後一個影格上， 想要避免動畫結束回到初始設定，可以試試上面的屬性參數喔！