今天是CSS最後一章，最後來講講CSS動畫，運用CSS能夠製作一些基本的動畫，讓畫面更有趣！除了前面說過的transition屬性能利用過渡效果呈現簡單的小動畫，CSS還有一個Animation系列屬性。

Animation(動畫)

講到Animation就要講到「關鍵影格@keyframes」，也就是將一段時間分成好幾個狀態，瀏覽器會自動平順地補足狀態形成漸變。利用百分比的方式(0%~100%)告訴瀏覽器，元素一開始的狀態、中間發生的變化、最後的狀態。

animation-name: name;	/*動畫名稱*/
animation-duration:20s;	/*動畫持續時間*/
animation-delay:1s;	/*動畫延遲播放時間*/
animation-iteration-count:infinite;	/*動畫播放次數:1、infinite*/
animation-timing-function:ease-in-out;	/*時間曲線:ease、linear、ease-in、ease-out、ease-in-out..etc */
animation-direction:normal;	/*動畫播放方向:normal、everse、alternate、alternate-reverse*/
animation-fill-mode:none;	/*動畫播放前後模式:none、forwards、backwards、both*/

<div class="item1">
            item1
</div>
        
<style>
    div.item1 {
        width: 50px;
        height: 50px;
        border: 2px solid red;
        animation: move 10s; /*動畫名稱(animation-name)|持續時間(animation-duration)*/
    }

    @keyframes move {
        0% {
            transform: translateX(0); /*起始狀態*/
        }

        50% {
            transform: translateX(200px); /*中間狀態*/
        }

        100% {
            transform: translateX(0); /*最後狀態*/
        }
    }
</style>

下面也以作品集舉個例子說明：Luna的線上作品集

<div class="scroll-img imgBox">
     <img src="assets/img/scroll.png" alt="scroll">
</div>

        
<style>
.scroll-img {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  animation: loopUpDown ease-in-out infinite 2.5s; /*動畫名稱(animation-name)｜時間曲線(animation-timing-function)｜播放次數(animation-iteration-count)｜持續時間(animation-duration)｜*/
}


@keyframes loopUpDown {
  0% {
    transform: translateX(-50%) translateY(0px); /*原本的狀態就有translateX(-50%)，所以後面每個狀態也都需要加上，translateY(0px)垂直位移*/
  }

  50% {
    transform: translateX(-50%) translateY(8px);
  }

  0% {
    transform: translateX(-50%) translateY(0px);
  }
}
</style>

˙

希望經過這些內容，有幫助大家更了解CSS功能，持續的練習能夠製作越來越多樣化的樣式，並運用到自己的作品之中喔！依照慣例講一下明天的內容～要開始另一個重點了！那就是RWD響應式網頁，會先說明再告訴大家該如何規劃大小版，那就明天見。