今天這一篇文章將講解在CSS以animation製作動畫

CSS animation

先上程式~
HTML:

    <div class="test-ani">
    </div>

CSS:

.test-ani{
    // position:absolute;
    // left:0;
    position: relative;
    width:50px;
    height:50px;
    background:rgb(85, 219, 45);
    animation-name:move;
    animation-duration:2s;
}
@keyframes move{
    from{
     left: 0px;
    }
    to{
        left: 50px;
    }
}

這是一個最基礎的animation動畫，如果你複製並執行以上程式，會看到一個在重整螢幕後會向右滑行的綠色方塊
這裡來講解其程式邏輯，我們用@keyframe 這個標籤宣告叫"move"的動畫，然後我們在.test-ani這個用"animation-name"這個屬性"move"這個動畫，並用"animation-duration"這個屬性將動畫的執行時間設為2秒。而@keyframe中的邏輯則是:動畫開頭left屬性為0px，動畫結束left屬性為50px，是不是很簡單呢。

這裡來介紹animation的屬性

• animation-name 動畫名稱
• animation-duration 動畫持續時間 範例: animation-duration: 2s;
• animation-delay 動畫延遲時間，動畫會先 範例: animation-delay: 2s;
• animation-iteration-count 動畫播放次數 範例: animation-iteration-count: 3 ;
• animation-direction 動畫播放方向，預設 normal。
  其他還有 reverse、alternate、alternate-reverse。
• animation-fill-mode 動畫播放前後模式，預設 none。
  其他還有 forwards、backwards、both。
• animation-timing-function 播放時間函式 預設為:ease
  其他還有： linear、ease-in、ease-out、ease-in-out
  step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。
• animation-play-state 動畫播放或暫停狀態，預設 running。
  其他還有 paused。

此外動畫也可以用%來設置更細膩的動畫，而to和from代表的便是0%和100%

@keyframes move{
    0%{
        background:#fff;
    }
    30%{
        background:#f00;
    }
    70%{
        background:rgb(46, 180, 33);
    }
    100%{
        background:rgb(72, 74, 222);
    }
}

像以上便是一個讓物件變色的動畫