前言

不是只有JavaScript 或 JQuery 才可以做出動畫，現在連CSS也可以啦，於是我就想說先從簡單的來試試看好了

關鍵影格@keyframes

animation 是讓 CSS 從一個狀態轉到另一個狀態，藉此來產生動畫效果，
而中間轉換的過程，需要借助 關鍵影格(@keyframe) 來達成動畫的效果。

語法

我們這裡使用 from 和 to，表示在5s的期間內，從一開始(0%)到最後(100%)動畫的變化。

@keyframe 自訂動畫名稱 {
    from { left: 0; }
    to { left: 100%; }
}

簡單動畫範例(一)

首先要先有一個 Div

HTML

<div class="ani">

</div>

CSS

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

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

@keyframe abc {
    from { left: 0; }
    to { left: 100%; }
}

當然也可以使用百分比，就會有很多不同時間點的變化

@keyframes 自訂動畫名稱 {
    0% { left: 0; }
    25% { left: 20%; }
    50% { left: 40%; }
    75% { left: 60%; }
    100% { left: 80%; }
}

簡單動畫範例(二)

HTML

<div class="ani">

</div>

CSS

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

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

@keyframe abc {
    0% { left: 400px; top: 0; }
    25% { left: 500px; top: 0; }
    50% { left: 500px; top: 100px; }
    75% { left: 400px; top: 100px; }
    100% { left: 400px; top: 0; }
}

這樣使用CSS就可以做出簡單的動畫啦，明天我們來看看如何在頁面滑到特定位置時，執行動畫
但不知道明天做不做得出來哈哈，我們鐵人賽Day28見囉!!